扫码体验

示例代码
<!-- API-DEMO page/component/icon.axml -->
<view class="page">
<view class="page-description">图标</view>
<view class="page-section">
<view class="page-section-title">Type</view>
<view class="page-section-demo icon-list">
<block a:for="{{iconType}}">
<view class="item">
<icon type="{{item}}" size="45"/>
<text>{{item}}</text>
</view>
</block>
</view>
</view>
<view class="page-section">
<view class="page-section-title">Size</view>
<view class="page-section-demo icon-list">
<block a:for="{{iconSize}}">
<view class="item">
<icon type="success" size="{{item}}"/>
<text>{{item}}</text>
</view>
</block>
</view>
</view>
<view class="page-section">
<view class="page-section-title">Color</view>
<view class="page-section-demo icon-list">
<block a:for="{{iconColor}}">
<view class="item">
<icon type="success" size="45" color="{{item}}"/>
<text style="color:{{item}}">{{item}}</text>
</view>
</block>
</view>
</view>
</view>
// API-DEMO page/component/icon.js
Page({
data: {
iconSize: [20, 30, 40, 50, 60],
iconColor: [
'red', 'yellow', 'blue', 'green',
],
iconType: [
'success',
'info',
'warn',
'waiting',
'clear',
'success_no_circle',
'download',
'cancel',
'search',
],
},
});
/* API-DEMO page/component/icon.acss */
.icon-list {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.item {
display: -webkit-flex;
display: flex;
flex-direction: column;
-webkit-flex-direction: column;
margin-bottom: 10px;
margin-right: 10px;
align-items: center;
-webkit-align-items: center;
}
属性
属性名 | 类型 | 默认值 | 描述 |
type | String | - | icon 类型,有效值: info, warn, waiting, cancel, download, search, clear, success, success_no_circle,loading |
size | Number | 23 | icon 大小,单位 px |
color | String | - | icon 颜色,同 CSS 色值 |
在文档使用中是否遇到以下问题
更多建议
匿名提交