一、icon 图标
<icon type="success" size="40"/>
<icon type="success_no_circle" size="40"/>
<icon type="info" size="40"/>
<icon type="warn" size="40"/>
<icon type="waiting" size="40"/>
<icon type="cancel" size="40"/>
<icon type="download" size="40"/>
<icon type="search" size="40"/>
<icon type="clear" size="40"/>
当然,也可以用 color 指定 icon 的颜色:
<icon type="success" size="40" color="pink"/>
二、progress 进度条
progress 的属性有很多,比如以下几个:
1、percent:百分比0~100
<progress percent="40"/>
2、show-info:在进度条右侧显示百分比
<progress percent="40" show-info />
3、border-radius:圆角大小
<progress percent="40" show-info border-radius="5"/>
4、font-size:右侧百分比字体大小
<progress percent="40" show-info border-radius="5" font-size="18"/>
5、stroke-width:进度条线的宽度(指的是粗细)
<progress percent="40" show-info border-radius="5" font-size="18" stroke-width="10"/>
6、activeColor:已选择的进度条的颜色
<progress percent="40" show-info activeColor="blue"/>
7、backgroundColor:未选择的进度条的颜色
<progress percent="40" show-info activeColor="blue" backgroundColor="red"/>
8、active:进度条从左往右的动画
<progress percent="40" show-info activeColor="blue" backgroundColor="red" active/>
可以看到进度是慢慢增长到40%的。
9、active-mode:backwards: 动画从头播;forwards:动画从上次结束点接着播
10、duration:进度增加1%所需毫秒数,默认是30
<progress percent="40" show-info activeColor="blue" backgroundColor="red" active duration="60"/>
这里我们设置成60,可以看到进度增长的明显慢了。
三、rich-text 富文本
<rich-text nodes='<div style="color:blue"><b>小程序</b>开发</div>'></rich-text>