Home > Article > WeChat Applet > WeChat applet wxapp content component icon detailed introduction
This article mainly introduces the relevant information about the detailed introduction of the wxapp content component icon of the WeChat applet, and attaches a simple example. Friends in need can refer to it
WeChat applet content component
Related articles:
WeChat Mini Program wxapp content component icon
WeChat Mini Program wxapp content component text
WeChat Mini Program wxapp content component progress
icon
icon.
| Attribute name | Type | Default value | Description |
|---|---|---|---|
| type | String | The type of icon, valid values: success, success_no_circle, info, warn, waiting, cancel, download, search, clear | |
| size | Number | 23 | The size of the icon, The unit is px |
| color | Color | The color of the icon, the same as the color of css |
Example:
<view class="group">
<block wx:for="{{iconSize}}">
<icon type="success" size="{{item}}"/>
</block>
</view>
<view class="group">
<block wx:for="{{iconType}}">
<icon type="{{item}}" size="45"/>
</block>
</view>
<view class="group">
<block wx:for="{{iconColor}}">
<icon type="success" size="45" color="{{item}}"/>
</block>
</view>
Page({
data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconColor: [
'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
],
iconType: [
'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',
'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',
'info_circle', 'cancel', 'search', 'clear'
]
}
})
icon
Thank you for reading, I hope it can help you, thank you for your support of this site!
More WeChat applet wxapp content component icon detailed introduction related articles please pay attention to the PHP Chinese website!