frontend / zui

Download as
Browse Code »

Commit 021971ab9f1e8142b35866c68e915b62dd5e9e87

Authored by 刘汉宸
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
  Diff comments   View file @021971a
1 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 26 ```html
12 27 <template>
13 28 <div>
14 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 46 <zui-icon name="trendingup" size="2rem" color="red" />
17   - <zui-icon name="dns" size="2rem" dot />
18 47 </div>
19 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 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 102 \ No newline at end of file
... ...