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

icon docs

Browse Source
This commit is contained in:
cookfront 2017-04-06 14:53:22 +08:00
parent a85c3c2695
commit 668c3e0e8d
3 changed files with 262 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
docs/assets/docs.css
View File

@ -66,19 +66,6 @@ code.hljs {
}
}
.github-logo {
position: absolute;
top: 19px;
right: 20px;
width: 22px;
height: 0;
padding-top: 22px;
overflow: hidden;
background-image: url(https://img.yzcdn.cn/upload_files/2017/03/30/Fil9peDfgzvk3kj-oFCsElS4FS1x.png);
background-size: contain;
background-repeat: no-repeat;
}
.main-content {
margin: 50px 15px 40px;
}

161
docs/examples-dist/icon.vue
View File

@ -1,42 +1,143 @@
<template><section class="demo-icon"><h1 class="demo-title">icon</h1><example-block title="所有Icon">
<zan-icon name="qr-invalid"></zan-icon>
<zan-icon name="qr"></zan-icon>
<zan-icon name="exchange"></zan-icon>
<zan-icon name="close"></zan-icon>
<zan-icon name="location"></zan-icon>
<zan-icon name="upgrade"></zan-icon>
<zan-icon name="check"></zan-icon>
<zan-icon name="checked"></zan-icon>
<zan-icon name="like-o"></zan-icon>
<zan-icon name="like" :style="{ color: '#f44' }"></zan-icon>
<zan-icon name="chat"></zan-icon>
<zan-icon name="shop"></zan-icon>
<zan-icon name="photograph"></zan-icon>
<zan-icon name="add"></zan-icon>
<zan-icon name="add2"></zan-icon>
<zan-icon name="photo"></zan-icon>
<zan-icon name="logistics"></zan-icon>
<zan-icon name="edit"></zan-icon>
<zan-icon name="passed"></zan-icon>
<zan-icon name="cart"></zan-icon>
<zan-icon name="arrow"></zan-icon>
<zan-icon name="gift"></zan-icon>
<zan-icon name="search"></zan-icon>
<zan-icon name="clear"></zan-icon>
<zan-icon name="success"></zan-icon>
<zan-icon name="fail"></zan-icon>
<zan-icon name="contact"></zan-icon>
<zan-row>
<zan-col span="8">
<zan-icon name="qr-invalid"></zan-icon>
<span>qr-invalid</span>
</zan-col>
<zan-col span="8">
<zan-icon name="qr"></zan-icon>
<span>qr</span>
</zan-col>
<zan-col span="8">
<zan-icon name="exchange"></zan-icon>
<span>exchange</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="close"></zan-icon>
<span>close</span>
</zan-col>
<zan-col span="8">
<zan-icon name="location"></zan-icon>
<span>location</span>
</zan-col>
<zan-col span="8">
<zan-icon name="upgrade"></zan-icon>
<span>upgrade</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="check"></zan-icon>
<span>check</span>
</zan-col>
<zan-col span="8">
<zan-icon name="checked"></zan-icon>
<span>checked</span>
</zan-col>
<zan-col span="8">
<zan-icon name="like-o"></zan-icon>
<span>like-o</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="like" style="color: red;"></zan-icon>
<span>like</span>
</zan-col>
<zan-col span="8">
<zan-icon name="chat"></zan-icon>
<span>chat</span>
</zan-col>
<zan-col span="8">
<zan-icon name="shop"></zan-icon>
<span>shop</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="photograph"></zan-icon>
<span>photograph</span>
</zan-col>
<zan-col span="8">
<zan-icon name="add"></zan-icon>
<span>add</span>
</zan-col>
<zan-col span="8">
<zan-icon name="add2"></zan-icon>
<span>add2</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="photo"></zan-icon>
<span>photo</span>
</zan-col>
<zan-col span="8">
<zan-icon name="logistics"></zan-icon>
<span>logistics</span>
</zan-col>
<zan-col span="8">
<zan-icon name="edit"></zan-icon>
<span>edit</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="passed"></zan-icon>
<span>passed</span>
</zan-col>
<zan-col span="8">
<zan-icon name="cart"></zan-icon>
<span>cart</span>
</zan-col>
<zan-col span="8">
<zan-icon name="arrow"></zan-icon>
<span>arrow</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="gift"></zan-icon>
<span>gift</span>
</zan-col>
<zan-col span="8">
<zan-icon name="search"></zan-icon>
<span>search</span>
</zan-col>
<zan-col span="8">
<zan-icon name="clear"></zan-icon>
<span>clear</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="success"></zan-icon>
<span>success</span>
</zan-col>
<zan-col span="8">
<zan-icon name="fail"></zan-icon>
<span>fail</span>
</zan-col>
<zan-col span="8">
<zan-icon name="contact"></zan-icon>
<span>contact</span>
</zan-col>
</zan-row>
</example-block></section></template>
<style>
@component-namespace demo {
@b icon {
.zan-col {
text-align: center;
}
.zan-icon {
margin: 10px;
font-size: 45px;
width: 56px;
text-align: center;
display: block;
margin: 15px 0;
}
}
}

161
docs/examples-docs/icon.md
View File

@ -1,12 +1,14 @@
<style>
@component-namespace demo {
@b icon {
.zan-col {
text-align: center;
}
.zan-icon {
margin: 10px;
font-size: 45px;
width: 56px;
text-align: center;
display: block;
margin: 15px 0;
}
}
}
@ -52,33 +54,132 @@ export default {
:::demo 所有Icon
```html
<zan-icon name="qr-invalid"></zan-icon>
<zan-icon name="qr"></zan-icon>
<zan-icon name="exchange"></zan-icon>
<zan-icon name="close"></zan-icon>
<zan-icon name="location"></zan-icon>
<zan-icon name="upgrade"></zan-icon>
<zan-icon name="check"></zan-icon>
<zan-icon name="checked"></zan-icon>
<zan-icon name="like-o"></zan-icon>
<zan-icon name="like" :style="{ color: '#f44' }"></zan-icon>
<zan-icon name="chat"></zan-icon>
<zan-icon name="shop"></zan-icon>
<zan-icon name="photograph"></zan-icon>
<zan-icon name="add"></zan-icon>
<zan-icon name="add2"></zan-icon>
<zan-icon name="photo"></zan-icon>
<zan-icon name="logistics"></zan-icon>
<zan-icon name="edit"></zan-icon>
<zan-icon name="passed"></zan-icon>
<zan-icon name="cart"></zan-icon>
<zan-icon name="arrow"></zan-icon>
<zan-icon name="gift"></zan-icon>
<zan-icon name="search"></zan-icon>
<zan-icon name="clear"></zan-icon>
<zan-icon name="success"></zan-icon>
<zan-icon name="fail"></zan-icon>
<zan-icon name="contact"></zan-icon>
<zan-row>
<zan-col span="8">
<zan-icon name="qr-invalid"></zan-icon>
<span>qr-invalid</span>
</zan-col>
<zan-col span="8">
<zan-icon name="qr"></zan-icon>
<span>qr</span>
</zan-col>
<zan-col span="8">
<zan-icon name="exchange"></zan-icon>
<span>exchange</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="close"></zan-icon>
<span>close</span>
</zan-col>
<zan-col span="8">
<zan-icon name="location"></zan-icon>
<span>location</span>
</zan-col>
<zan-col span="8">
<zan-icon name="upgrade"></zan-icon>
<span>upgrade</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="check"></zan-icon>
<span>check</span>
</zan-col>
<zan-col span="8">
<zan-icon name="checked"></zan-icon>
<span>checked</span>
</zan-col>
<zan-col span="8">
<zan-icon name="like-o"></zan-icon>
<span>like-o</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="like" style="color: red;"></zan-icon>
<span>like</span>
</zan-col>
<zan-col span="8">
<zan-icon name="chat"></zan-icon>
<span>chat</span>
</zan-col>
<zan-col span="8">
<zan-icon name="shop"></zan-icon>
<span>shop</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="photograph"></zan-icon>
<span>photograph</span>
</zan-col>
<zan-col span="8">
<zan-icon name="add"></zan-icon>
<span>add</span>
</zan-col>
<zan-col span="8">
<zan-icon name="add2"></zan-icon>
<span>add2</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="photo"></zan-icon>
<span>photo</span>
</zan-col>
<zan-col span="8">
<zan-icon name="logistics"></zan-icon>
<span>logistics</span>
</zan-col>
<zan-col span="8">
<zan-icon name="edit"></zan-icon>
<span>edit</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="passed"></zan-icon>
<span>passed</span>
</zan-col>
<zan-col span="8">
<zan-icon name="cart"></zan-icon>
<span>cart</span>
</zan-col>
<zan-col span="8">
<zan-icon name="arrow"></zan-icon>
<span>arrow</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="gift"></zan-icon>
<span>gift</span>
</zan-col>
<zan-col span="8">
<zan-icon name="search"></zan-icon>
<span>search</span>
</zan-col>
<zan-col span="8">
<zan-icon name="clear"></zan-icon>
<span>clear</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="success"></zan-icon>
<span>success</span>
</zan-col>
<zan-col span="8">
<zan-icon name="fail"></zan-icon>
<span>fail</span>
</zan-col>
<zan-col span="8">
<zan-icon name="contact"></zan-icon>
<span>contact</span>
</zan-col>
</zan-row>
```
:::