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

docs(Icon): fix layout usage

Browse Source
This commit is contained in:
chenjiahan 2020-10-13 20:46:01 +08:00
parent b3e415d254
commit 86d5e0a4cf
1 changed files with 68 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/icon/demo/index.vue
View File

@ -3,15 +3,18 @@
<van-tabs v-model="tab" sticky> <van-tabs v-model="tab" sticky>
<van-tab :title="t('demo')"> <van-tab :title="t('demo')">
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-row>
<van-col span="6" @click="copy(demoIcon)"> <van-col span="6" @click="copy(demoIcon)">
<van-icon :name="demoIcon" /> <van-icon :name="demoIcon" />
</van-col> </van-col>
<van-col span="6" @click="copy(demoImage)"> <van-col span="6" @click="copy(demoImage)">
<van-icon :name="demoImage" /> <van-icon :name="demoImage" />
</van-col> </van-col>
</van-row>
</demo-block> </demo-block>
<demo-block :title="t('badge')"> <demo-block :title="t('badge')">
<van-row>
<van-col span="6" @click="copy(demoIcon, { dot: true })"> <van-col span="6" @click="copy(demoIcon, { dot: true })">
<van-icon :name="demoIcon" dot /> <van-icon :name="demoIcon" dot />
</van-col> </van-col>
@ -21,28 +24,34 @@
<van-col span="6" @click="copy(demoIcon, { badge: '99+' })"> <van-col span="6" @click="copy(demoIcon, { badge: '99+' })">
<van-icon :name="demoIcon" badge="99+" /> <van-icon :name="demoIcon" badge="99+" />
</van-col> </van-col>
</van-row>
</demo-block> </demo-block>
<demo-block :title="t('color')"> <demo-block :title="t('color')">
<van-row>
<van-col span="6" @click="copy(demoIcon, { color: BLUE })"> <van-col span="6" @click="copy(demoIcon, { color: BLUE })">
<van-icon :name="demoIcon" :color="BLUE" /> <van-icon :name="demoIcon" :color="BLUE" />
</van-col> </van-col>
<van-col span="6" @click="copy(demoIcon, { color: GREEN })"> <van-col span="6" @click="copy(demoIcon, { color: GREEN })">
<van-icon :name="demoIcon" :color="GREEN" /> <van-icon :name="demoIcon" :color="GREEN" />
</van-col> </van-col>
</van-row>
</demo-block> </demo-block>
<demo-block :title="t('size')"> <demo-block :title="t('size')">
<van-row>
<van-col span="6" @click="copy(demoIcon, { size: '40' })"> <van-col span="6" @click="copy(demoIcon, { size: '40' })">
<van-icon :name="demoIcon" size="40" /> <van-icon :name="demoIcon" size="40" />
</van-col> </van-col>
<van-col span="6" @click="copy(demoIcon, { size: '3rem' })"> <van-col span="6" @click="copy(demoIcon, { size: '3rem' })">
<van-icon :name="demoIcon" size="3rem" /> <van-icon :name="demoIcon" size="3rem" />
</van-col> </van-col>
</van-row>
</demo-block> </demo-block>
</van-tab> </van-tab>
<van-tab :title="t('basic')"> <van-tab :title="t('basic')">
<van-row>
<van-col <van-col
v-for="icon in icons.basic" v-for="icon in icons.basic"
:key="icon" :key="icon"
@ -52,9 +61,11 @@
<van-icon :name="icon" /> <van-icon :name="icon" />
<span>{{ icon }}</span> <span>{{ icon }}</span>
</van-col> </van-col>
</van-row>
</van-tab> </van-tab>
<van-tab :title="t('outline')"> <van-tab :title="t('outline')">
<van-row>
<van-col <van-col
v-for="icon in icons.outline" v-for="icon in icons.outline"
:key="icon" :key="icon"
@ -64,9 +75,11 @@
<van-icon :name="icon" /> <van-icon :name="icon" />
<span>{{ icon }}</span> <span>{{ icon }}</span>
</van-col> </van-col>
</van-row>
</van-tab> </van-tab>
<van-tab :title="t('filled')"> <van-tab :title="t('filled')">
<van-row>
<van-col <van-col
v-for="icon in icons.filled" v-for="icon in icons.filled"
:key="icon" :key="icon"
@ -76,6 +89,7 @@
<van-icon :name="icon" /> <van-icon :name="icon" />
<span>{{ icon }}</span> <span>{{ icon }}</span>
</van-col> </van-col>
</van-row>
</van-tab> </van-tab>
</van-tabs> </van-tabs>
</demo-section> </demo-section>