# Icon 图标

请扫码查看示例

# 介绍

用来在主体内容右上角显示徽标数据。

# 引入

通过以下方式来引入组件

使用包管理器安装mui-minix 组件库。如： npm i mui-minix -S;
在要使用该组件的页面中使用element标签引入该组件。

# 代码演示

# 基本用法

通过设置 type 属性为图片的链接。

<element name="m-icon" src="@/node_modules/mui-minix/src/icon/index"></element>
<m-icon name="http://dolphin-weex-dev.msmartlife.cn/static/component/card/image/smallcard_ic_015.png"></m-icon>

1
2

# 尺寸大小

通过设置 size 属性，可以改变图标的尺寸。默认为 24。

<element name="m-icon" src="@/node_modules/mui-minix/src/icon/index"></element>
<m-icon name="http://dolphin-weex-dev.msmartlife.cn/static/component/card/image/smallcard_ic_015.png"></m-icon>
<m-icon size="{{32}}" name="http://dolphin-weex-dev.msmartlife.cn/static/component/card/image/smallcard_ic_015.png"></m-icon>

1
2
3

# 显示圆角

通过设置 round 属性，可以让图标显示为圆形。默认为 false。

<element name="m-icon" src="@/node_modules/mui-minix/src/icon/index"></element>
<m-icon name="http://dolphin-weex-dev.msmartlife.cn/static/component/card/image/smallcard_ic_015.png"></m-icon>
<m-icon round="{{true}}" name="http://dolphin-weex-dev.msmartlife.cn/static/component/card/image/smallcard_ic_015.png"></m-icon>

1
2
3

# 背景颜色

通过 background-color 属性, 可以控制图标的背景颜色。默认为 -。

<element name="m-icon" src="@/node_modules/mui-minix/src/icon/index"></element>
<m-icon background-color="#00cbb8" name="http://dolphin-weex-dev.msmartlife.cn/static/component/card/image/smallcard_ic_015.png"></m-icon>
<m-icon background-color="#ff8225" round="{{true}}" name="http://dolphin-weex-dev.msmartlife.cn/static/component/card/image/smallcard_ic_015.png"></m-icon>

1
2
3

# 右上角圆点

通过设置 dot 属性，可以在图标右上角显示一个实心圆点。默认为 false。

<element name="m-icon" src="@/node_modules/mui-minix/src/icon/index"></element>
<m-icon dot="{{true}}" color="#00cbb8" name="http://dolphin-weex-dev.msmartlife.cn/static/component/card/image/smallcard_ic_015.png"></m-icon>
<m-icon dot="{{true}}" color="#ff8225" round="{{true}}" name="http://dolphin-weex-dev.msmartlife.cn/static/component/card/image/smallcard_ic_015.png"></m-icon>

1
2
3

# 右上角文本

通过设置 badge 属性，可以在图标右上角显示文本。默认为 -。同时设置了 badge 与 dot 属性，badge 优先级更高。

<element name="m-icon" src="@/node_modules/mui-minix/src/icon/index"></element>
<m-icon badge="30" color="#00cbb8" name="http://dolphin-weex-dev.msmartlife.cn/static/component/card/image/smallcard_ic_015.png"></m-icon>
<m-icon badge="100" color="#ff8225" round="{{true}}" name="http://dolphin-weex-dev.msmartlife.cn/static/component/card/image/smallcard_ic_015.png"></m-icon>
<m-icon badge="hot" dot="{{true}}" color="#ff8225" round="{{true}}" name="http://dolphin-weex-dev.msmartlife.cn/static/component/card/image/smallcard_ic_015.png"></m-icon>

1
2
3
4

# 最大值

通过 max 属性, 可以控制图标右上角显示最大数值。默认为 99。

<element name="m-icon" src="@/node_modules/mui-minix/src/icon/index"></element>
<m-icon badge="12" max="{{9}}" name="http://dolphin-weex-dev.msmartlife.cn/static/component/card/image/smallcard_ic_015.png"></m-icon>

1
2

# Api

# Prop

字段	说明	类型	默认值	是否必须
`name`	icon的名称或图片链接	`string`	`-`	`是`
`round`	是否圆角	`boolean`	`false`	`否`
`size`	尺寸	`number`	`24`	`否`
`dot`	右上角是否显示为圆点	`boolean`	`false`	`否`
`max`	右上角可显示的最大数值	`number`	`99`	`否`
`badge`	右上角文本内容	`string`	`-`	`否`
`color`	背景颜色	`string`	`#ff3b30`	`否`
`top`	右上角圆点,文本距离包括内容右上角Y轴距离	`number`	`0`	`否`
`right`	右上角圆点,文本距离包括内容右上角X轴距离	`number`	`0`	`否`

# Events

事件名称	说明	回调参数
`m-click`	点击时触发，且开关状态不为禁用时触发	`-`