Commit 021971ab9f1e8142b35866c68e915b62dd5e9e87
1 parent
96b7e634
Exists in
master
[修改] 修改Icon文档
Showing
1 changed file
with
83 additions
and
14 deletions
Show diff stats
examples/views/docs/component/icon.md
| 1 | # Icon 图标 | 1 | # Icon 图标 |
| 2 | 2 | ||
| 3 | -基础图标 | 3 | +使用iconfont图标 |
| 4 | 4 | ||
| 5 | ## 基础用法 | 5 | ## 基础用法 |
| 6 | 6 | ||
| 7 | -图标说明 | 7 | +::: snippet 设置`name`改变图标，name与`iconfont`项目中的`icon-xxx`中的内容为准 |
| 8 | 8 | ||
| 9 | -::: snippet 示例 | 9 | +```html |
| 10 | +<template> | ||
| 11 | + <div> | ||
| 12 | + <zui-icon name="attachmoney" /> | ||
| 13 | + <zui-icon name="accountbalancewallet" /> | ||
| 14 | + <zui-icon name="trendingup" /> | ||
| 15 | + <zui-icon name="dns" /> | ||
| 16 | + </div> | ||
| 17 | +</template> | ||
| 18 | +``` | ||
| 19 | + | ||
| 20 | +::: | ||
| 21 | + | ||
| 22 | +## 大小 | ||
| 23 | + | ||
| 24 | +::: snippet 设置`size`改变图标大小，支持px与rem等css标准样式 | ||
| 10 | 25 | ||
| 11 | ```html | 26 | ```html |
| 12 | <template> | 27 | <template> |
| 13 | <div> | 28 | <div> |
| 14 | <zui-icon name="attachmoney" /> | 29 | <zui-icon name="attachmoney" /> |
| 15 | - <zui-icon name="accountbalancewallet" size="2rem" info="1" /> | 30 | + <zui-icon name="accountbalancewallet" size="16px" /> |
| 31 | + <zui-icon name="trendingup" size="2rem" /> | ||
| 32 | + </div> | ||
| 33 | +</template> | ||
| 34 | +``` | ||
| 35 | + | ||
| 36 | +::: | ||
| 37 | + | ||
| 38 | +## 颜色 | ||
| 39 | + | ||
| 40 | +::: snippet 设置`color`改变图标颜色，支持HEX与RGB等CSS标准样式 | ||
| 41 | + | ||
| 42 | +```html | ||
| 43 | +<template> | ||
| 44 | + <div> | ||
| 45 | + <zui-icon name="attachmoney" size="1.5rem" color="deepskyblue" /> | ||
| 16 | <zui-icon name="trendingup" size="2rem" color="red" /> | 46 | <zui-icon name="trendingup" size="2rem" color="red" /> |
| 17 | - <zui-icon name="dns" size="2rem" dot /> | ||
| 18 | </div> | 47 | </div> |
| 19 | </template> | 48 | </template> |
| 49 | +``` | ||
| 50 | + | ||
| 51 | +::: | ||
| 52 | + | ||
| 53 | +## 标记信息 | ||
| 54 | + | ||
| 55 | +::: snippet 设置`info`改变右上角标记信息 | ||
| 56 | + | ||
| 57 | +```html | ||
| 58 | +<template> | ||
| 59 | + <div> | ||
| 60 | + <zui-icon name="accountbalancewallet" size="2rem" info="1" /> | ||
| 61 | + <zui-icon name="dns" size="2rem" info="新" /> | ||
| 62 | + </div> | ||
| 63 | +</template> | ||
| 64 | +``` | ||
| 65 | + | ||
| 66 | +::: | ||
| 67 | + | ||
| 68 | +## 标记点 | ||
| 20 | 69 | ||
| 21 | -<script> | ||
| 22 | -export default { | ||
| 23 | - data() { | ||
| 24 | - return { | ||
| 25 | - } | ||
| 26 | - }, | ||
| 27 | -} | ||
| 28 | -</script> | 70 | +::: snippet 设置`dot`在右上角显示一个标记点 |
| 71 | + | ||
| 72 | +```html | ||
| 73 | +<template> | ||
| 74 | + <div> | ||
| 75 | + <zui-icon name="dns" size="2rem" dot /> | ||
| 76 | + </div> | ||
| 77 | +</template> | ||
| 29 | ``` | 78 | ``` |
| 30 | 79 | ||
| 31 | -::: | ||
| 32 | \ No newline at end of file | 80 | \ No newline at end of file |
| 81 | +::: | ||
| 82 | + | ||
| 83 | +## API | ||
| 84 | + | ||
| 85 | +## Attribute 属性 | ||
| 86 | + | ||
| 87 | +参数|说明|类型|可选值|默认值 | ||
| 88 | +-|-|-|-|- | ||
| 89 | +name | 图标名 | String | - | - | ||
| 90 | +fontFamily | 图标类型 | String | - | iconfont | ||
| 91 | +classPrefix | 图标前缀 | String | - | 'icon-' | ||
| 92 | +size | 大小 | String | - | - | ||
| 93 | +color | 颜色 | String | - | - | ||
| 94 | +info | 角标内容 | Number, String | - | - | ||
| 95 | +dot | 标记点 | Boolean | - | - | ||
| 96 | + | ||
| 97 | +## Events 事件 | ||
| 98 | + | ||
| 99 | +事件名称|说明|回调参数 | ||
| 100 | +-|-|- | ||
| 101 | +click | 按钮点击事件 | - | ||
| 33 | \ No newline at end of file | 102 | \ No newline at end of file |