图标。
注意:
- 建议使用体积较小的字体。
- Amicon不支持 onTap 事件,可以在外层加一个 view 标签。
- AMIcon 是自定义组件封装的扩展组件,上面没有提供点击事件;自行绑定一个点击事件,不会生效,可以到 modules 里面找到源码,修改源码来新增点击事件。
扫码体验
示例代码
// API-DEMO page/component/am-icon/am-icon.json
{
"defaultTitle": "小程序AntUI组件库",
"usingComponents": {
"am-icon": "mini-antui/es/am-icon/index"
}
}
<!-- API-DEMO page/component/am-icon/am-icon.axml -->
<view>
<view class="icon-title">基础</view>
<view class="icon-list">
<block a:for="{{basicTypes}}">
<view class="icon-item">
<am-icon type="{{item}}" />
<text class="icon-desc">{{item}}</text>
</view>
</block>
</view>
<view class="icon-title">描边风格</view>
<view class="icon-list">
<block a:for="{{strokeTypes}}">
<view class="icon-item">
<am-icon type="{{item}}" />
<text class="icon-desc">{{item}}</text>
</view>
</block>
</view>
<view class="icon-title">实心风格</view>
<view class="icon-list">
<block a:for="{{solidTypes}}">
<view class="icon-item">
<am-icon type="{{item}}" />
<text class="icon-desc">{{item}}</text>
</view>
</block>
</view>
</view>
// API-DEMO page/component/am-icom/am-icon.js
Page({
data: {
basicTypes: [
'arrow-left',
'arrow-up',
'arrow-right',
'arrow-down',
'cross',
'plus',
],
strokeTypes: [
'close-o',
'dislike-o',
'heart-o',
'help-o',
'like-o',
'location-o',
'info-o',
'success-o',
'wait-o',
'warning-o',
'star-o',
'download',
'friends',
'circle',
'delete',
'charge',
'card',
'notice',
'qrcode',
'reload',
'scan',
'money',
'search',
'setting',
'share',
'zoom-in',
'zoom-out',
],
solidTypes: [
'close',
'dislike',
'heart',
'help',
'like',
'location',
'info',
'success',
'wait',
'warning',
'star',
],
},
});
/* API-DEMO page/component/am-icon/am-icon.acss */
.icon-title {
margin-top: 20px;
margin-bottom: 10px;
margin-left: 10px;
color: #333;
font-size: 16px;
}
.icon-list {
background: #fff;
}
.icon-item {
display: inline-flex;
width: 33.33333%;
height: 80px;
align-items: center;
flex-direction: column;
justify-content: center;
}
.icon-desc {
margin-top: 10px;
}
属性
属性名 | 描述 | 类型 | 必填 |
type | icon 类型,具体效果扫上面二维码预览(有效值请见下方表格)。 | String | 是 |
size | icon 大小,单位 px。 | String | 否 |
color | icon 颜色,同 css 的 color。 | String | 否 |
type 有效值
图标风格 | type有效值 |
基础类型 | arrow-left 、 arrow-up 、 arrow-right 、 arrow-down 、cross 、plus |
描边风格 | close-o 、dislike-o 、heart-o 、help-o 、like-o 、location-o 、info-o 、success-o 、wait-o 、warning-o 、star-o 、download 、friends 、circle 、delete 、charge 、card 、notice 、qrcode 、reload 、scan 、money 、search 、setting 、share 、zoom-in 、zoom-out |
实心风格 | close 、dislike 、heart 、help 、like 、location 、info 、success 、wait 、warning 、star |
在文档使用中是否遇到以下问题
更多建议
匿名提交