智能小程序 Ray 开发实践——基础内容组件 Progress 和 RichText 介绍

Progress

进度条。

导入

import { Progress } from '@ray-js/ray';

属性说明

属性类型默认值必填说明
percentnumber百分比 0~100
showInfobooleanfalse在进度条右侧显示百分比
borderRadiusnumber/string0圆角大小,默认为 rpx
fontSizenumber/string16右侧百分比字体大小,默认为 px
strokeWidthnumber/string6进度条线的宽度,默认为 rpx
activeColorstring#007aff已选择的进度条的颜色
backgroundColorstringrgba(0,0,0,.04)未选择的进度条的颜色
activebooleanfalse进度条从左往右的动画
activeModestringbackwardsbackwards: 动画从头播;forwards:动画从上次结束点接着播

示例代码

import React from 'react';
import { View, Progress } from '@ray-js/components';
 
export default function () {
  return (
    <View>
      <View className="progress-box">
        <Progress percent={20} showInfo strokeWidth={3}/>
      </View>
 
      <View className="progress-box">
        <Progress percent={60} active strokeWidth={3} />
      </View>
 
      <View className="progress-box">
        <Progress percent={80} activeColor="#10AEFF" active strokeWidth={3} />
      </View>
    </View>
  );
}

👉 立即免费领取开发资源,体验涂鸦 MiniApp 小程序开发。 

RichText

富文本。

导入

import { RichText } from '@ray-js/ray';

属性说明

属性名类型默认值必填说明支持平台
nodesarray/string[]节点列表/HTML StringWeb

nodes

现支持两种节点,通过 type 来区分,分别是元素节点和文本节点,默认是元素节点,在富文本区域里显示的 HTML 节点。

元素节点:type = node
属性说明类型必填备注
name标签名string支持部分受信任的 HTML 节点
attrs属性object支持部分受信任的属性,遵循 Pascal 命名法
children子节点列表array结构和 nodes 一致
文本节点:type = text
属性说明类型必填备注
text文本string支持 entities

受信任的 HTML 节点及属性

全局支持 class 和 style 属性,不支持 id 属性

节点属性
a
abbr
address
article
aside
b
bdi
bdodir
big
blockquote
br
caption
center
cite
code
colspan,width
colgroupspan,width
dd
del
div
dl
dt
em
fieldset
font
footer
h1
h2
h3
h4
h5
h6
header
hr
i
imgalt,src,height,width
ins
label
legend
li
mark
nav
olstart,type
p
pre
q
rt
ruby
s
section
small
span
strong
sub
sup
tablewidth
tbody
tdcolspan,height,rowspan,width
tfoot
thcolspan,height,rowspan,width
thead
trcolspan,height,rowspan,width
tt
u
ul
iframe
pre

示例代码

  • style.less
.item-wrap {
  margin: 16px 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--ty-native-checkbox-border);
}
 
.btn-line + .btn-line {
  margin-top: 10px;
}

基本使用
import React from 'react';
import { View, RichText } from '@ray-js/components';
 
import './style.less';
 
export default function () {
  return (
    <View>
      <View className="item-wrap">
        <RichText nodes='<div><h1>Title</h1><p>Life is <i>like</i> a box of <b style="color: red">chocolates</b>.</p></div>' />
      </View>
      <View className="item-wrap">
        <RichText
          nodes={[
            {
              name: 'div',
              attrs: {
                name: 'outer',
              },
              children: [
                {
                  type: 'text',
                  text: 'You never know what you are gonna get.',
                },
              ],
            },
          ]}
        />
      </View>
    </View>
  );
}

👉 立即免费领取开发资源,体验涂鸦 MiniApp 小程序开发。 

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IoT砖家涂拉拉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值