blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

docs(Icon): add demo and docs (#2498)

Browse Source
This commit is contained in:
Dottieworks 2019-12-09 13:57:07 +08:00 committed by neverland
parent b5ecc922a3
commit cc48c40547
3 changed files with 119 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
example/pages/icon/index.js
View File

@ -4,7 +4,8 @@ import Page from '../../common/page';
Page({ Page({
data: { data: {
icons, icons,
active: 0 active: 0,
demoIcon: 'location-o'
}, },
onSwitch(event) { onSwitch(event) {

101
example/pages/icon/index.wxml
View File

@ -48,4 +48,105 @@
<view class="text">{{ item }}</view> <view class="text">{{ item }}</view>
</van-col> </van-col>
</van-tab> </van-tab>
<van-tab title="用法示例" custom-class="demo-tab-pane">
<demo-block title="图标右上角小红点">
<van-col
custom-class="col"
span="6"
>
<van-icon
name="{{ demoIcon }}"
size="32px"
custom-class="icon"
/>
<view class="text">{{ demoIcon }}</view>
</van-col>
<van-col
custom-class="col"
span="6"
>
<van-icon
name="{{ demoIcon }}"
size="32px"
custom-class="icon"
dot
/>
<view class="text">{{ demoIcon }}</view>
</van-col>
</demo-block>
<demo-block title="图标右上角文字提示">
<van-col
custom-class="col"
span="6"
>
<van-icon
name="{{ demoIcon }}"
size="32px"
custom-class="icon"
/>
<view class="text">{{ demoIcon }}</view>
</van-col>
<van-col
custom-class="col"
span="6"
>
<van-icon
name="{{ demoIcon }}"
size="32px"
custom-class="icon"
info="99+"
/>
<view class="text">{{ demoIcon }}</view>
</van-col>
</demo-block>
<demo-block title="图标颜色">
<van-col
custom-class="col"
span="6"
>
<van-icon
name="{{ demoIcon }}"
size="32px"
custom-class="icon"
/>
<view class="text">{{ demoIcon }}</view>
</van-col>
<van-col
custom-class="col"
span="6"
>
<van-icon
name="{{ demoIcon }}"
size="32px"
custom-class="icon"
color="red"
/>
<view class="text">{{ demoIcon }}</view>
</van-col>
</demo-block>
<demo-block title="图标大小">
<van-col
custom-class="col"
span="6"
>
<van-icon
name="{{ demoIcon }}"
size="32px"
custom-class="icon"
/>
<view class="text">{{ demoIcon }}</view>
</van-col>
<van-col
custom-class="col"
span="6"
>
<van-icon
name="{{ demoIcon }}"
size="45px"
custom-class="icon"
/>
<view class="text">{{ demoIcon }}</view>
</van-col>
</demo-block>
</van-tab>
</van-tabs> </van-tabs>

16
packages/icon/README.md
View File

@ -35,6 +35,22 @@
<van-icon name="chat" info="99+" /> <van-icon name="chat" info="99+" />
``` ```
### 图标颜色
设置`color`属性来控制图标颜色
```html
<van-icon name="chat" color="red" />
```
### 图标大小
设置`size`属性来控制图标大小
```html
<van-icon name="chat" size="50px" />
```
## API ## API
### Props ### Props