blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-24 18:36:51 +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

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

@ -3,79 +3,93 @@
<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-col span="6" @click="copy(demoIcon)"> <van-row>
<van-icon :name="demoIcon" /> <van-col span="6" @click="copy(demoIcon)">
</van-col> <van-icon :name="demoIcon" />
<van-col span="6" @click="copy(demoImage)"> </van-col>
<van-icon :name="demoImage" /> <van-col span="6" @click="copy(demoImage)">
</van-col> <van-icon :name="demoImage" />
</van-col>
</van-row>
</demo-block> </demo-block>
<demo-block :title="t('badge')"> <demo-block :title="t('badge')">
<van-col span="6" @click="copy(demoIcon, { dot: true })"> <van-row>
<van-icon :name="demoIcon" dot /> <van-col span="6" @click="copy(demoIcon, { dot: true })">
</van-col> <van-icon :name="demoIcon" dot />
<van-col span="6" @click="copy(demoIcon, { badge: '9' })"> </van-col>
<van-icon :name="demoIcon" badge="9" /> <van-col span="6" @click="copy(demoIcon, { badge: '9' })">
</van-col> <van-icon :name="demoIcon" badge="9" />
<van-col span="6" @click="copy(demoIcon, { badge: '99+' })"> </van-col>
<van-icon :name="demoIcon" badge="99+" /> <van-col span="6" @click="copy(demoIcon, { badge: '99+' })">
</van-col> <van-icon :name="demoIcon" badge="99+" />
</van-col>
</van-row>
</demo-block> </demo-block>
<demo-block :title="t('color')"> <demo-block :title="t('color')">
<van-col span="6" @click="copy(demoIcon, { color: BLUE })"> <van-row>
<van-icon :name="demoIcon" :color="BLUE" /> <van-col span="6" @click="copy(demoIcon, { color: BLUE })">
</van-col> <van-icon :name="demoIcon" :color="BLUE" />
<van-col span="6" @click="copy(demoIcon, { color: GREEN })"> </van-col>
<van-icon :name="demoIcon" :color="GREEN" /> <van-col span="6" @click="copy(demoIcon, { color: GREEN })">
</van-col> <van-icon :name="demoIcon" :color="GREEN" />
</van-col>
</van-row>
</demo-block> </demo-block>
<demo-block :title="t('size')"> <demo-block :title="t('size')">
<van-col span="6" @click="copy(demoIcon, { size: '40' })"> <van-row>
<van-icon :name="demoIcon" size="40" /> <van-col span="6" @click="copy(demoIcon, { size: '40' })">
</van-col> <van-icon :name="demoIcon" size="40" />
<van-col span="6" @click="copy(demoIcon, { size: '3rem' })"> </van-col>
<van-icon :name="demoIcon" size="3rem" /> <van-col span="6" @click="copy(demoIcon, { size: '3rem' })">
</van-col> <van-icon :name="demoIcon" size="3rem" />
</van-col>
</van-row>
</demo-block> </demo-block>
</van-tab> </van-tab>
<van-tab :title="t('basic')"> <van-tab :title="t('basic')">
<van-col <van-row>
v-for="icon in icons.basic" <van-col
:key="icon" v-for="icon in icons.basic"
span="6" :key="icon"
@click="copy(icon)" span="6"
> @click="copy(icon)"
<van-icon :name="icon" /> >
<span>{{ icon }}</span> <van-icon :name="icon" />
</van-col> <span>{{ icon }}</span>
</van-col>
</van-row>
</van-tab> </van-tab>
<van-tab :title="t('outline')"> <van-tab :title="t('outline')">
<van-col <van-row>
v-for="icon in icons.outline" <van-col
:key="icon" v-for="icon in icons.outline"
span="6" :key="icon"
@click="copy(icon)" span="6"
> @click="copy(icon)"
<van-icon :name="icon" /> >
<span>{{ icon }}</span> <van-icon :name="icon" />
</van-col> <span>{{ icon }}</span>
</van-col>
</van-row>
</van-tab> </van-tab>
<van-tab :title="t('filled')"> <van-tab :title="t('filled')">
<van-col <van-row>
v-for="icon in icons.filled" <van-col
:key="icon" v-for="icon in icons.filled"
span="6" :key="icon"
@click="copy(icon)" span="6"
> @click="copy(icon)"
<van-icon :name="icon" /> >
<span>{{ icon }}</span> <van-icon :name="icon" />
</van-col> <span>{{ icon }}</span>
</van-col>
</van-row>
</van-tab> </van-tab>
</van-tabs> </van-tabs>
</demo-section> </demo-section>