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

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 小程序开发。