icon
图标。组件属性的长度单位默认为px,支持传入单位(rpx/px)
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| type | String | 是 | icon的类型 | ||
| size | Number / String | 23px | 否 | icon的大小，单位px | |
| color | Color | 否 | icon的颜色，同css的color |
type 的合法值
| 值 | 说明 | 最低版本 |
|---|---|---|
| success | 成功 | |
| success_no_circle | 成功 | |
| success_circle | 成功 | |
| safe_success | 成功 | |
| circle | 圆圈 | |
| info | 提示 | |
| info_circle | 提示 | |
| warn | 警告 | |
| safe_warn | 警告 | |
| waiting | 等待 | |
| waiting_circle | 等待 | |
| cancel | 取消 | |
| safe_cancel | 取消 | |
| download | 下载 | |
| search | 查询 | |
| clear | 清除 |
示例代码：
<!--pages/component/pages/icon/icon.mcml-->
<view class="container">
<view class="statement">图标。</view>
<view class="cssname">type</view>
<view style="display:flex;flex-direction:column;">
<view mc:for="{{icons}}" style="display:flex;flex-direction:row;align-items:center;">
<icon type="{{item}}" style="margin:10rpx 5rpx;"></icon>
<text style="margin:10rpx;font-size:32rpx;">{{item}}</text>
</view>
</view>
<view class="cssname">size</view>
<view style="display:flex;flex-direction:row;align-items:center;">
<icon mc:for="{{size}}" size="{{item}}" style="margin: 10rpx;" type="success">123</icon>
</view>
<view class="cssname">color</view>
<view style="display:flex;flex-direction:row;align-items:center;">
<icon mc:for="{{color}}" color="{{item}}" style="margin: 10rpx;" type="success"></icon>
</view>
</view>
// pages/component/pages/icon/icon.js
Page({
data: {
icons: [
'success',
'success_no_circle',
'success_circle',
'safe_success',
'circle',
'info',
'info_circle',
'warn',
'safe_warn',
'waiting',
'waiting_circle',
'cancel',
'safe_cancel',
'download',
'search',
'clear'
],
size: [13, 23, 33, 43],
color: ['red', 'blue', 'green', 'gray']
}
})