Progress
进度条。
导入
import { Progress } from '@ray-js/ray';
属性说明
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
percent | number | 否 | 百分比 0~100 | |
showInfo | boolean | false | 否 | 在进度条右侧显示百分比 |
borderRadius | number/string | 0 | 否 | 圆角大小,默认为 rpx |
fontSize | number/string | 16 | 否 | 右侧百分比字体大小,默认为 px |
strokeWidth | number/string | 6 | 否 | 进度条线的宽度,默认为 rpx |
activeColor | string | #007aff | 否 | 已选择的进度条的颜色 |
backgroundColor | string | rgba(0,0,0,.04) | 否 | 未选择的进度条的颜色 |
active | boolean | false | 否 | 进度条从左往右的动画 |
activeMode | string | backwards | 否 | backwards: 动画从头播;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';
属性说明
属性名 | 类型 | 默认值 | 必填 | 说明 | 支持平台 |
---|---|---|---|---|---|
nodes | array/string | [] | 否 | 节点列表/HTML String | Web |
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 | |
bdo | dir |
big | |
blockquote | |
br | |
caption | |
center | |
cite | |
code | |
col | span,width |
colgroup | span,width |
dd | |
del | |
div | |
dl | |
dt | |
em | |
fieldset | |
font | |
footer | |
h1 | |
h2 | |
h3 | |
h4 | |
h5 | |
h6 | |
header | |
hr | |
i | |
img | alt,src,height,width |
ins | |
label | |
legend | |
li | |
mark | |
nav | |
ol | start,type |
p | |
pre | |
q | |
rt | |
ruby | |
s | |
section | |
small | |
span | |
strong | |
sub | |
sup | |
table | width |
tbody | |
td | colspan,height,rowspan,width |
tfoot | |
th | colspan,height,rowspan,width |
thead | |
tr | colspan,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 小程序开发。