wxc-icon使用
<wxc-icon name="clock"
size="large"
:icon-style="iconStyle">
</wxc-icon>
<wxc-icon>共有3个属性:
1. name:图标名。共有20个图标,其图标与name的对应关系如下:
取值分别是:
['less', 'more_unfold', 'back', 'more',
'add', 'subtract', 'close', 'cry',
'search', 'delete', 'help', 'refresh',
'success', 'warning', 'wrong', 'clock',
'scanning', 'filter', 'map', 'play']
2. size:图标大小。有4个取值:xs
/small
/medium
/large
。
3. icon-style:自定义icon样式。
<wxc-icon>本质是一个<text>,其最终样式为:
{
fontFamily:'weexUiIconFont',
fontSize,
...iconStyle
}
所以自定义的iconStyle会覆盖所有预定义样式。自定义iconStyle支持所有合法的<text>样式。
常用的iconStyle有2个:
style={color:red,fontSize:'60px'}
<wxc-icon>不支持slot。
<wxc-icon>支持1个事件回调:
@wxcIconClicked="iconClicked"