百度智能小程序 图标
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 |
String |
否 |
icon 的颜色，同 css 的 color 。 |
|||
type 有效值
| 值 | 说明 |
|---|---|
|
success |
成功图标 |
|
info |
消息图标 |
|
warn |
警告图标 |
|
waiting |
等待图标 |
|
success_no_circle |
无圆形边框成功图标 |
|
clear |
删除图标 |
|
search |
搜索图标 |
|
personal |
人物图标 |
|
setting |
设置图标 |
|
top |
回到顶部图标 |
|
close |
关闭图标 |
|
cancel |
取消图标 |
|
download |
下载图标 |
|
checkboxSelected |
复选框选中图标 |
|
radioSelected |
单选框选中图标 |
|
radioUnselect |
单选框未选中图标 |
|
loadingGrey |
loading 图标 |
示例
代码示例 1： 自定义 icon 类型
<view class="wrap">
<view class="card-area">
<view class="top-description border-bottom">自定义icon类型</view>
<view class="icon-area">
<view class="icon-item" s-for="type in types.smallDefault">
<icon type="{{type}}"/>
<view class="icon-text"> {{type}}</view>
</view>
</view>
</view>
</view>Page({
data: {
types: {
smallDefault: ['success', 'info', 'warn', 'waiting',
'success_no_circle', 'clear', 'search', 'personal',
'setting', 'top', 'close', 'cancel', 'download',
'checkboxSelected', 'radioSelected', 'radioUnselect']
}
}
});.icon-area {
margin-top: .15rem;
}
.icon-item {
display: inline-block;
flex-direction: column;
justify-content: center;
text-align: center;
width: .8rem;
height: .95rem;
margin: .07rem;
}
.icon-text {
margin-top: .15rem;
width: .8rem;
word-break: break-all;
}设计指南
根据使用场景选择适用的 icon 类型：功能类图标通常用于辅助文案内容，用于功能入口处；状态类图标通常用来展现当前状态。
代码示例 2： 自定义 icon 大小
<view class="wrap">
<view class="card-area">
<view class="top-description border-bottom">自定义icon大小</view>
<view class="icon-area">
<view s-for="size in sizes" class="icon-item">
<icon type="success" size="{{size}}"/>
<view class="icon-text">{{size}}px</view>
</view>
</view>
</view>
</view>Page({
data: {
sizes: [
40, 34, 30, 24, 22, 18, 16
]
}
});.icon-area {
margin-top: .15rem;
}
.icon-item {
display: inline-block;
flex-direction: column;
justify-content: center;
text-align: center;
width: .8rem;
height: .95rem;
margin: .07rem;
}
.icon-text {
margin-top: .15rem;
width: .8rem;
word-break: break-all;
}代码示例 3： 自定义 icon 颜色
<view class="wrap">
<view class="card-area">
<view class="top-description border-bottom">自定义icon颜色</view>
<view class="icon-area">
<view class="icon-item" s-for="color in colors">
<icon type="success" size="25" color="{{color}}" class="icon-color" />
<view class="icon-text">{{color}}</view>
</view>
</view>
</view>
</view>Page({
data: {
colors: [
'#3388FF', '#F7534F', '#FF6600', '#000000'
]
}
});.icon-area {
margin-top: .15rem;
}
.icon-item {
display: inline-block;
flex-direction: column;
justify-content: center;
text-align: center;
width: .8rem;
height: .95rem;
margin: .07rem;
}
.icon-text {
margin-top: .15rem;
width: .8rem;
word-break: break-all;
}设计指南
请根据当前的语义选择合适的 icon 颜色，如红色通常表示警示，请谨慎使用。
正确
错误