icon 图标
解释: 图标
属性说明
属性名 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
type | String | 是 | 生效的值:success, info, warn, waiting, success_no_circle, clear, search, personal, setting, top, close, cancel, download, checkboxSelected, radioSelected, radioUnselect, loadingGrey | |
size | Number | 23 | 否 | icon 的大小,单位是 px |
color | Color | 否 | icon 的颜色,同 css 的 color |
type 有效值
值 | 说明 |
---|---|
success | 成功图标 |
info | 消息图标 |
warn | 警告图标 |
waiting | 等待图标 |
success_no_circle | 无圆形边框成功图标 |
clear | 删除图标 |
search | 搜索图标 |
personal | 人物图标 |
setting | 设置图标 |
top | 回到顶部图标 |
close | 关闭图标 |
cancel | 取消图标 |
download | 下载图标 |
checkboxSelected | 复选框选中图标 |
radioSelected | 单选框选中图标 |
radioUnselect | 单选框未选中图标 |
loadingGrey | loading图标 |
示例
扫码体验
请使用百度APP扫码
代码示例
<view class="wrap">
<view class="title">默认样式</view>
<view class="group">
<view>
<icon s-for="type in types.smallDefault" type="{{type}}" class="small-default" />
</view>
</view>
<view class="title">尺寸选择</view>
<view class="group choose">
<icon s-for="size in sizes" type="success" size="{{size}}" class="icon-size" />
</view>
<view class="title">颜色选择</view>
<view class="group choose">
<icon s-for="color in colors" type="success" size="40" color="{{color}}" class="icon-color" />
</view>
</view>
Page({
data: {
types: {
smallDefault: ['success', 'info', 'warn', 'waiting',
'success_no_circle', 'clear', 'search', 'personal',
'setting', 'top', 'close', 'cancel', 'download',
'checkboxSelected', 'radioSelected', 'radioUnselect']
},
colors: [
'#333', '#666', '#999', '#3C76FF', '#F7534F'
],
sizes: [
40, 35, 30, 25
]
}
});