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

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