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

docs(Icon): unify example with vant (#2728)

Browse Source
This commit is contained in:
rex 2020-02-07 16:27:48 +08:00 committed by GitHub
parent 771d187d43
commit 088c0b840d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 116 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,8 @@ Page({
data: {
icons,
active: 0,
demoIcon: 'location-o'
demoIcon: 'chat-o',
demoImage: 'https://b.yzcdn.cn/vant/icon-demo-1126.png',
},
onSwitch(event) {

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

@ -3,6 +3,111 @@
color="#1989fa"
bind:change="onSwitch"
>
<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"
/>
</van-col>
<van-col
custom-class="col"
span="6"
>
<van-icon
name="{{ demoImage }}"
size="32px"
custom-class="icon"
/>
</van-col>
</demo-block>
<demo-block title="提示信息">
<van-col
custom-class="col"
span="6"
>
<van-icon
name="{{ demoIcon }}"
size="32px"
custom-class="icon"
dot
/>
</van-col>
<van-col
custom-class="col"
span="6"
>
<van-icon
name="{{ demoIcon }}"
size="32px"
custom-class="icon"
info="9"
/>
</van-col>
<van-col
custom-class="col"
span="6"
>
<van-icon
name="{{ demoIcon }}"
size="32px"
custom-class="icon"
info="99+"
/>
</van-col>
</demo-block>
<demo-block title="图标颜色">
<van-col
custom-class="col"
span="6"
>
<van-icon
name="{{ demoIcon }}"
size="32px"
custom-class="icon"
color="#1989fa"
/>
</van-col>
<van-col
custom-class="col"
span="6"
>
<van-icon
name="{{ demoIcon }}"
size="32px"
custom-class="icon"
color="#07c160"
/>
</van-col>
</demo-block>
<demo-block title="图标大小">
<van-col
custom-class="col"
span="6"
>
<van-icon
name="{{ demoIcon }}"
size="40"
custom-class="icon"
/>
</van-col>
<van-col
custom-class="col"
span="6"
>
<van-icon
name="{{ demoIcon }}"
size="3rem"
custom-class="icon"
/>
</van-col>
</demo-block>
</van-tab>
<van-tab title="基础图标" custom-class="demo-tab-pane">
<van-col
wx:for="{{ icons.basic }}"
@ -48,105 +153,4 @@
<view class="text">{{ item }}</view>
</van-col>
</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>

16
example/pages/icon/index.wxss
View File

@ -3,24 +3,26 @@ page {
}
.col {
text-align: center;
height: 100px;
float: none;
display: inline-block;
float: none;
text-align: center;
vertical-align: middle;
}
.icon {
display: block;
margin: 16px 0;
color: #323233;
margin: 20px 0 10px;
}
.text {
font-size: 12px;
display: block;
height: 36px;
margin: -4px 0 4px;
padding: 0 5px;
line-height: 14px;
color: #7d7e80;
color: #646566;
font-size: 12px;
line-height: 18px;
}
.demo-tab-pane {