Attribute | Type | Default value | Description |
type | string | - | The type of icon, whose valid values are: success, success_no_circle, info, warn, waiting, cancel, download, search, clear. |
size | umber / string | 23 | The size of the icon, with the default unit in pixels. |
color | string | - | The color of the icon, same as the CSS color. |
aria-label | string | - | Accessibility, (Attribute) Additional description of the element. |
<view class="group"><block wx.for="{{iconSize}}"><icon type="success" size="{{item}}" /></block></view><view class="group"><block wx.for="{{iconType}}"><icon type="{{item}}" size="40" /></block></view><view class="group"><block wx.for="{{iconColor}}"><icon type="success" size="40" color="{{item}}" /></block></view>
Page({data: {iconSize: [20, 30, 40, 50, 60, 70],iconColor: ['red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'],iconType: ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear']}})
Attribute | Type | Default value | Description |
percent | float | - | Percentage range: 0-100 |
show-info | boolean | false | Display percentage on the right side of the progress bar |
border-radius | number / string | 0 | Chamfer size, unit: px |
font-size | number / string | 16 | Font size of the percentage on the right, unit: px |
stroke-width | number / string | 6 | Width of the progress bar line |
color | color | #09BB07 | Progress bar color (use activeColor) |
activeColor | color | - | Color of the selected progress bar |
backgroundColor | color | - | Color of the unselected progress bar |
active | boolean | false | Animation of the progress bar moving from left to right |
active-mode | string | backwards | Backwards: Animation plays from the beginning Forwards: The animation continues from the point where it last ended. |
bindactiveend | eventhandle | - | Animation completion event |
aria-label | string | - | Accessibility, (Attribute) Additional description of the element. |
<progress percent="20" show-info /><progress percent="40" stroke-width="12" /><progress percent="60" color="blue" /><progress percent="80" active />
Attribute | Type | Default value | Description |
selectable | boolean | false | Text selection availability |
space | string | - | Display consecutive spaces |
decode | boolean | false | Whether to decode |
Value | Description |
ensp | Half-size space for Chinese characters |
emsp | Full-size space for Chinese characters |
nbsp | Space size set based on the font |
decode
can parse the following:
<
>
&
'
 
&emsp
.<text>
component only supports nesting<text>
.<view class="btn-area"><view class="body-view"><text>{{text}}</text><button bindtap="add">add line</button><button bindtap="remove">remove line</button></view></view>
const initData = 'this is first line\\nthis is second line'const extraLine = []Page({data: {text: initData},add(e) {extraLine.push('other line')this.setData({text: initData + '\\n' + extraLine.join('\\n')})},remove(e) {if (extraLine.length > 0) {extraLine.pop()this.setData({text: initData + '\\n' + extraLine.join('\\n')})}}})
Attribute | Type | Default value | Description |
nodes | array / string | - | Node List / HTML String |
space | string | - | Display consecutive spaces |
Value | Description |
ensp | Half-size space for Chinese characters |
emsp | Full-size space for Chinese characters |
nbsp | Space size set based on the font |
tap
, touchstart
, touchmove
, touchcancel
, touchend
, and longtap
.Attribute | Description | Type | Required | Remarks |
name | Tag name | string | Yes | Supports a subset of trusted HTML nodes |
attrs | Attribute | object | No | Supports a subset of recipient attributes, adhering to Pascal naming conventions. |
children | List of child nodes | array | No | Consistent with the structure and nodes |
Attribute | Description | Type | Required | Remarks |
text | Text | string | Yes | Supports entities |
Node | Attribute | Node | Attribute |
a | - | img | alt,src,height,width |
abbr | - | ins | - |
b | - | label | - |
br | - | legend | - |
code | - | li | - |
col | span,width | ol | start,type |
colgroup | span,width | p | - |
dd | - | q | - |
del | - | span | - |
div | - | strong | - |
dl | - | sub | - |
dt | - | sup | - |
em | - | table | width |
fieldset | - | tbody | - |
h1 | - | td | colspan,height,rowspan,width |
h2 | - | tfoot | - |
h3 | - | th | colspan,height,rowspan,width |
h4 | - | thead | - |
h5 | - | tr | - |
h6 | - | ul | - |
hr | - | - | - |
<!-- rich-text.wxml --><rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
// rich-text.jsPage({data: {nodes: [{name: 'div',attrs: {class: 'div_class',style: 'line-height: 60px; color: red;'},children: [{type: 'text',text: 'Hello World!'}]}]},tap() {console.log('tap')}})
nodes
, as it may result in performance degradation.
Was this page helpful?