mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(Icon): improve demo (#5215)
This commit is contained in:
neverland
GitHub
parent
650e479313
commit
308c0a9a92
@ -16,7 +16,7 @@ Vue.use(Icon);
|
||||
Use `name` prop to set icon name or icon URL
|
||||
|
||||
```html
|
||||
<van-icon name="close" />
|
||||
<van-icon name="chat-o" />
|
||||
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
|
||||
```
|
||||
|
||||
@ -27,9 +27,9 @@ Use `dot` prop, a small red dot will be displayed in the upper right corner of t
|
||||
Use `info` prop, the info will be displayed in the upper right corner of the icon.
|
||||
|
||||
```html
|
||||
<van-icon name="chat" dot />
|
||||
<van-icon name="chat" info="9" />
|
||||
<van-icon name="chat" info="99+" />
|
||||
<van-icon name="chat-o" dot />
|
||||
<van-icon name="chat-o" info="9" />
|
||||
<van-icon name="chat-o" info="99+" />
|
||||
```
|
||||
|
||||
### Icon Color
|
||||
@ -37,8 +37,8 @@ Use `info` prop, the info will be displayed in the upper right corner of the ico
|
||||
Use `color` prop to set icon color
|
||||
|
||||
```html
|
||||
<van-icon name="location-o" color="#ff0000" />
|
||||
<van-icon name="chat" color="#00ff00" />
|
||||
<van-icon name="chat-o" color="#1989fa" />
|
||||
<van-icon name="chat-o" color="#07c160" />
|
||||
```
|
||||
|
||||
### Icon Size
|
||||
@ -46,8 +46,8 @@ Use `color` prop to set icon color
|
||||
Use `size` prop to set icon size
|
||||
|
||||
```html
|
||||
<van-icon name="location-o" size="40px" />
|
||||
<van-icon name="chat" size="20px" />
|
||||
<van-icon name="chat-o" size="40" />
|
||||
<van-icon name="chat-o" size="3rem" />
|
||||
```
|
||||
|
||||
### Use local font file
|
||||
|
||||
@ -20,7 +20,7 @@ Vue.use(Icon);
|
||||
`Icon`的`name`属性支持传入图标名称或图片链接，所有可用的图标名称见右侧示例
|
||||
|
||||
```html
|
||||
<van-icon name="close" />
|
||||
<van-icon name="chat-o" />
|
||||
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
|
||||
```
|
||||
|
||||
@ -29,28 +29,27 @@ Vue.use(Icon);
|
||||
设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标
|
||||
|
||||
```html
|
||||
<van-icon name="chat" dot />
|
||||
<van-icon name="chat" info="9" />
|
||||
<van-icon name="chat" info="99+" />
|
||||
<van-icon name="chat-o" dot />
|
||||
<van-icon name="chat-o" info="9" />
|
||||
<van-icon name="chat-o" info="99+" />
|
||||
```
|
||||
|
||||
|
||||
### 图标颜色
|
||||
|
||||
`Icon`的`color`属性用来设置图标的颜色
|
||||
|
||||
```html
|
||||
<van-icon name="location-o" color="#ff0000" />
|
||||
<van-icon name="chat" color="#00ff00" />
|
||||
<van-icon name="chat-o" color="#1989fa" />
|
||||
<van-icon name="chat-o" color="#07c160" />
|
||||
```
|
||||
|
||||
### 图标大小
|
||||
|
||||
`Icon`的`size`属性用来设置图标的尺寸大小
|
||||
`Icon`的`size`属性用来设置图标的尺寸大小，默认单位为`px`
|
||||
|
||||
```html
|
||||
<van-icon name="location-o" size="40px" />
|
||||
<van-icon name="chat" size="20px" />
|
||||
<van-icon name="chat-o" size="40" />
|
||||
<van-icon name="chat-o" size="3rem" />
|
||||
```
|
||||
|
||||
### 使用本地字体文件
|
||||
|
||||
@ -1,76 +1,89 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<van-tabs v-model="tab" sticky :color="BLUE">
|
||||
<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>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('info')">
|
||||
<van-col span="6" @click="copy(demoIcon, { dot: true })">
|
||||
<van-icon :name="demoIcon" dot />
|
||||
</van-col>
|
||||
<van-col span="6" @click="copy(demoIcon, { info: '9' })">
|
||||
<van-icon :name="demoIcon" info="9" />
|
||||
</van-col>
|
||||
<van-col span="6" @click="copy(demoIcon, { info: '99+' })">
|
||||
<van-icon :name="demoIcon" info="99+" />
|
||||
</van-col>
|
||||
</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>
|
||||
</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>
|
||||
</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-col
|
||||
v-for="icon in icons.basic"
|
||||
:key="icon"
|
||||
span="6"
|
||||
@click="copy(icon)"
|
||||
>
|
||||
<van-icon :name="icon" />
|
||||
<span>{{ icon }}</span>
|
||||
</van-col>
|
||||
</van-tab>
|
||||
|
||||
<van-tab :title="$t('outline')">
|
||||
<van-col v-for="icon in icons.outline" :key="icon" span="6" @click="copy(icon)">
|
||||
<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-tab>
|
||||
|
||||
<van-tab :title="$t('filled')">
|
||||
<van-col v-for="icon in icons.filled" :key="icon" span="6" @click="copy(icon)">
|
||||
<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-tab>
|
||||
|
||||
<van-tab :title="$t('demo')">
|
||||
<demo-block :title="$t('dot')">
|
||||
<van-col span="6">
|
||||
<van-icon :name="demoIcon" @click="copy(demoIcon)" />
|
||||
<span>{{ demoIcon }}</span>
|
||||
</van-col>
|
||||
<van-col span="6">
|
||||
<van-icon :name="demoIcon" dot @click="copy(demoIcon, { dot: true })" />
|
||||
<span>{{ demoIcon }}</span>
|
||||
</van-col>
|
||||
</demo-block>
|
||||
<demo-block :title="$t('message')">
|
||||
<van-col span="6">
|
||||
<van-icon :name="demoIcon" @click="copy(demoIcon)" />
|
||||
<span>{{ demoIcon }}</span>
|
||||
</van-col>
|
||||
<van-col span="6">
|
||||
<van-icon :name="demoIcon" info="123" @click="copy(demoIcon, { info: '123' })" />
|
||||
<span>{{ demoIcon }}</span>
|
||||
</van-col>
|
||||
</demo-block>
|
||||
<demo-block :title="$t('color')">
|
||||
<van-col span="6">
|
||||
<van-icon :name="demoIcon" @click="copy(demoIcon)" />
|
||||
<span>{{ demoIcon }}</span>
|
||||
</van-col>
|
||||
<van-col span="6">
|
||||
<van-icon :name="demoIcon" color="#ff0000" @click="copy(demoIcon, { color: '#ff0000' })" />
|
||||
<span>{{ demoIcon }}</span>
|
||||
</van-col>
|
||||
</demo-block>
|
||||
<demo-block :title="$t('size')">
|
||||
<van-col span="6">
|
||||
<van-icon :name="demoIcon" @click="copy(demoIcon)" />
|
||||
<span>{{ demoIcon }}</span>
|
||||
</van-col>
|
||||
<van-col span="6">
|
||||
<van-icon :name="demoIcon" size="40px" @click="copy(demoIcon, { size: '40px' })" />
|
||||
<span>{{ demoIcon }}</span>
|
||||
</van-col>
|
||||
</demo-block>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icons from '@vant/icons';
|
||||
import { BLUE } from '../../utils/constant';
|
||||
import { BLUE, GREEN } from '../../utils/constant';
|
||||
|
||||
// from https://30secondsofcode.org
|
||||
function copyToClipboard(str) {
|
||||
@ -106,8 +119,6 @@ export default {
|
||||
outline: '线框风格',
|
||||
filled: '实底风格',
|
||||
demo: '用法示例',
|
||||
dot: '图标右上角小红点',
|
||||
message: '图标右上角徽标的内容',
|
||||
color: '图标颜色',
|
||||
size: '图标大小'
|
||||
},
|
||||
@ -119,8 +130,6 @@ export default {
|
||||
outline: 'Outline',
|
||||
filled: 'Filled',
|
||||
demo: 'Demo',
|
||||
dot: 'Show Red Dot',
|
||||
message: 'Show Info',
|
||||
color: 'Icon Color',
|
||||
size: 'Icon Size'
|
||||
}
|
||||
@ -128,10 +137,12 @@ export default {
|
||||
|
||||
data() {
|
||||
this.BLUE = BLUE;
|
||||
this.GREEN = GREEN;
|
||||
this.icons = icons;
|
||||
return {
|
||||
tab: 0,
|
||||
demoIcon: 'location-o'
|
||||
demoIcon: 'chat-o',
|
||||
demoImage: 'https://b.yzcdn.cn/vant/icon-demo-1126.png'
|
||||
};
|
||||
},
|
||||
|
||||
@ -183,12 +194,12 @@ export default {
|
||||
.van-col {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin: -4px 0 16px;
|
||||
padding: 0 5px;
|
||||
color: @gray-7;
|
||||
font-size: 12px;
|
||||
@ -201,7 +212,7 @@ export default {
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
margin: 20px 0 10px;
|
||||
margin: 16px 0 16px;
|
||||
color: @text-color;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
@ -59,7 +59,7 @@ export default {
|
||||
```
|
||||
|
||||
|
||||
### Change 事件
|
||||
### 监听切换事件
|
||||
|
||||
设置`change`方法来监听切换导航项时的事件
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
</van-grid-item>
|
||||
|
||||
<van-grid-item>
|
||||
<h3 class="demo-sidebar-title">{{ $t('eventChange') }}</h3>
|
||||
<h3 class="demo-sidebar-title">{{ $t('changeEvent') }}</h3>
|
||||
<van-sidebar v-model="activeKey4" @change="onChange">
|
||||
<van-sidebar-item :title="$t('title') + 1" />
|
||||
<van-sidebar-item :title="$t('title') + 2" />
|
||||
@ -47,13 +47,13 @@ export default {
|
||||
title: '标签名',
|
||||
showInfo: '提示信息',
|
||||
disabled: '禁用选项',
|
||||
eventChange: '切换事件',
|
||||
changeEvent: '监听切换事件',
|
||||
selectTip: '你切换到了'
|
||||
},
|
||||
'en-US': {
|
||||
showInfo: 'Show Info',
|
||||
disabled: 'Disabled',
|
||||
eventChange: 'Change Event',
|
||||
changeEvent: 'Change Event',
|
||||
selectTip: 'You select '
|
||||
}
|
||||
},
|
||||
|
||||
@ -56,7 +56,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-grid-item" style="flex-basis: 50%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center">
|
||||
<h3 class="demo-sidebar-title">切换事件</h3>
|
||||
<h3 class="demo-sidebar-title">监听切换事件</h3>
|
||||
<div class="van-sidebar"><a class="van-sidebar-item van-sidebar-item--select">
|
||||
<div class="van-sidebar-item__text">标签名1
|
||||
<!---->
|
||||
|
||||
@ -116,10 +116,7 @@ export default {
|
||||
### Change Event
|
||||
|
||||
```html
|
||||
<van-tabbar
|
||||
v-model="active"
|
||||
@change="onChange"
|
||||
>
|
||||
<van-tabbar v-model="active" @change="onChange">
|
||||
<van-tabbar-item icon="home-o">Tab1</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">Tab2</van-tabbar-item>
|
||||
<van-tabbar-item icon="freinds-o">Tab3</van-tabbar-item>
|
||||
|
||||
@ -118,13 +118,10 @@ export default {
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
### Change 事件
|
||||
### 监听切换事件
|
||||
|
||||
```html
|
||||
<van-tabbar
|
||||
v-model="active"
|
||||
@change="onChange"
|
||||
>
|
||||
<van-tabbar v-model="active" @change="onChange">
|
||||
<van-tabbar-item icon="home-o">标签1</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">标签2</van-tabbar-item>
|
||||
<van-tabbar-item icon="freinds-o">标签3</van-tabbar-item>
|
||||
|
||||
@ -68,7 +68,7 @@ export default {
|
||||
customIcon: '自定义图标',
|
||||
customColor: '自定义颜色',
|
||||
matchByName: '通过名称匹配',
|
||||
switchEvent: '切换标签事件',
|
||||
switchEvent: '监听切换事件',
|
||||
selectTip: '你切换到了'
|
||||
},
|
||||
'en-US': {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user