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): improve demo (#5215)

Browse Source
This commit is contained in:
neverland 2019-12-08 08:15:55 +08:00 committed by GitHub
parent 650e479313
commit 308c0a9a92
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 91 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/icon/README.md
View File

@ -16,7 +16,7 @@ Vue.use(Icon);
Use `name` prop to set icon name or icon URL Use `name` prop to set icon name or icon URL
```html ```html
<van-icon name="close" /> <van-icon name="chat-o" />
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" /> <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. Use `info` prop, the info will be displayed in the upper right corner of the icon.
```html ```html
<van-icon name="chat" dot /> <van-icon name="chat-o" dot />
<van-icon name="chat" info="9" /> <van-icon name="chat-o" info="9" />
<van-icon name="chat" info="99+" /> <van-icon name="chat-o" info="99+" />
``` ```
### Icon Color ### 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 Use `color` prop to set icon color
```html ```html
<van-icon name="location-o" color="#ff0000" /> <van-icon name="chat-o" color="#1989fa" />
<van-icon name="chat" color="#00ff00" /> <van-icon name="chat-o" color="#07c160" />
``` ```
### Icon Size ### Icon Size
@ -46,8 +46,8 @@ Use `color` prop to set icon color
Use `size` prop to set icon size Use `size` prop to set icon size
```html ```html
<van-icon name="location-o" size="40px" /> <van-icon name="chat-o" size="40" />
<van-icon name="chat" size="20px" /> <van-icon name="chat-o" size="3rem" />
``` ```
### Use local font file ### Use local font file

19
src/icon/README.zh-CN.md
View File

@ -20,7 +20,7 @@ Vue.use(Icon);
`Icon`的`name`属性支持传入图标名称或图片链接，所有可用的图标名称见右侧示例 `Icon`的`name`属性支持传入图标名称或图片链接，所有可用的图标名称见右侧示例
```html ```html
<van-icon name="close" /> <van-icon name="chat-o" />
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" /> <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
``` ```
@ -29,28 +29,27 @@ Vue.use(Icon);
设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标 设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标
```html ```html
<van-icon name="chat" dot /> <van-icon name="chat-o" dot />
<van-icon name="chat" info="9" /> <van-icon name="chat-o" info="9" />
<van-icon name="chat" info="99+" /> <van-icon name="chat-o" info="99+" />
``` ```
### 图标颜色 ### 图标颜色
`Icon`的`color`属性用来设置图标的颜色 `Icon`的`color`属性用来设置图标的颜色
```html ```html
<van-icon name="location-o" color="#ff0000" /> <van-icon name="chat-o" color="#1989fa" />
<van-icon name="chat" color="#00ff00" /> <van-icon name="chat-o" color="#07c160" />
``` ```
### 图标大小 ### 图标大小
`Icon`的`size`属性用来设置图标的尺寸大小 `Icon`的`size`属性用来设置图标的尺寸大小，默认单位为`px`
```html ```html
<van-icon name="location-o" size="40px" /> <van-icon name="chat-o" size="40" />
<van-icon name="chat" size="20px" /> <van-icon name="chat-o" size="3rem" />
``` ```
### 使用本地字体文件 ### 使用本地字体文件

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

@ -1,76 +1,89 @@
<template> <template>
<demo-section> <demo-section>
<van-tabs v-model="tab" sticky :color="BLUE"> <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-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" /> <van-icon :name="icon" />
<span>{{ icon }}</span> <span>{{ icon }}</span>
</van-col> </van-col>
</van-tab> </van-tab>
<van-tab :title="$t('outline')"> <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" /> <van-icon :name="icon" />
<span>{{ icon }}</span> <span>{{ icon }}</span>
</van-col> </van-col>
</van-tab> </van-tab>
<van-tab :title="$t('filled')"> <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" /> <van-icon :name="icon" />
<span>{{ icon }}</span> <span>{{ icon }}</span>
</van-col> </van-col>
</van-tab> </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> </van-tabs>
</demo-section> </demo-section>
</template> </template>
<script> <script>
import icons from '@vant/icons'; import icons from '@vant/icons';
import { BLUE } from '../../utils/constant'; import { BLUE, GREEN } from '../../utils/constant';
// from https://30secondsofcode.org // from https://30secondsofcode.org
function copyToClipboard(str) { function copyToClipboard(str) {
@ -106,8 +119,6 @@ export default {
outline: '线框风格', outline: '线框风格',
filled: '实底风格', filled: '实底风格',
demo: '用法示例', demo: '用法示例',
dot: '图标右上角小红点',
message: '图标右上角徽标的内容',
color: '图标颜色', color: '图标颜色',
size: '图标大小' size: '图标大小'
}, },
@ -119,8 +130,6 @@ export default {
outline: 'Outline', outline: 'Outline',
filled: 'Filled', filled: 'Filled',
demo: 'Demo', demo: 'Demo',
dot: 'Show Red Dot',
message: 'Show Info',
color: 'Icon Color', color: 'Icon Color',
size: 'Icon Size' size: 'Icon Size'
} }
@ -128,10 +137,12 @@ export default {
data() { data() {
this.BLUE = BLUE; this.BLUE = BLUE;
this.GREEN = GREEN;
this.icons = icons; this.icons = icons;
return { return {
tab: 0, 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 { .van-col {
display: inline-block; display: inline-block;
float: none; float: none;
height: 100px;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
span { span {
display: block; display: block;
margin: -4px 0 16px;
padding: 0 5px; padding: 0 5px;
color: @gray-7; color: @gray-7;
font-size: 12px; font-size: 12px;
@ -201,7 +212,7 @@ export default {
} }
.van-icon { .van-icon {
margin: 20px 0 10px; margin: 16px 0 16px;
color: @text-color; color: @text-color;
font-size: 32px; font-size: 32px;
} }

2
src/sidebar/README.zh-CN.md
View File

@ -59,7 +59,7 @@ export default {
``` ```
### Change 事件 ### 监听切换事件
设置`change`方法来监听切换导航项时的事件 设置`change`方法来监听切换导航项时的事件

6
src/sidebar/demo/index.vue
View File

@ -29,7 +29,7 @@
</van-grid-item> </van-grid-item>
<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 v-model="activeKey4" @change="onChange">
<van-sidebar-item :title="$t('title') + 1" /> <van-sidebar-item :title="$t('title') + 1" />
<van-sidebar-item :title="$t('title') + 2" /> <van-sidebar-item :title="$t('title') + 2" />
@ -47,13 +47,13 @@ export default {
title: '标签名', title: '标签名',
showInfo: '提示信息', showInfo: '提示信息',
disabled: '禁用选项', disabled: '禁用选项',
eventChange: '切换事件', changeEvent: '监听切换事件',
selectTip: '你切换到了' selectTip: '你切换到了'
}, },
'en-US': { 'en-US': {
showInfo: 'Show Info', showInfo: 'Show Info',
disabled: 'Disabled', disabled: 'Disabled',
eventChange: 'Change Event', changeEvent: 'Change Event',
selectTip: 'You select ' selectTip: 'You select '
} }
}, },

2
src/sidebar/test/__snapshots__/demo.spec.js.snap
View File

@ -56,7 +56,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div class="van-grid-item" style="flex-basis: 50%;"> <div class="van-grid-item" style="flex-basis: 50%;">
<div class="van-grid-item__content van-grid-item__content--center"> <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"><a class="van-sidebar-item van-sidebar-item--select">
<div class="van-sidebar-item__text">标签名1 <div class="van-sidebar-item__text">标签名1
<!----> <!---->

5
src/tabbar/README.md
View File

@ -116,10 +116,7 @@ export default {
### Change Event ### Change Event
```html ```html
<van-tabbar <van-tabbar v-model="active" @change="onChange">
v-model="active"
@change="onChange"
>
<van-tabbar-item icon="home-o">Tab1</van-tabbar-item> <van-tabbar-item icon="home-o">Tab1</van-tabbar-item>
<van-tabbar-item icon="search">Tab2</van-tabbar-item> <van-tabbar-item icon="search">Tab2</van-tabbar-item>
<van-tabbar-item icon="freinds-o">Tab3</van-tabbar-item> <van-tabbar-item icon="freinds-o">Tab3</van-tabbar-item>

7
src/tabbar/README.zh-CN.md
View File

@ -118,13 +118,10 @@ export default {
</van-tabbar> </van-tabbar>
``` ```
### Change 事件 ### 监听切换事件
```html ```html
<van-tabbar <van-tabbar v-model="active" @change="onChange">
v-model="active"
@change="onChange"
>
<van-tabbar-item icon="home-o">标签1</van-tabbar-item> <van-tabbar-item icon="home-o">标签1</van-tabbar-item>
<van-tabbar-item icon="search">标签2</van-tabbar-item> <van-tabbar-item icon="search">标签2</van-tabbar-item>
<van-tabbar-item icon="freinds-o">标签3</van-tabbar-item> <van-tabbar-item icon="freinds-o">标签3</van-tabbar-item>

2
src/tabbar/demo/index.vue
View File

@ -68,7 +68,7 @@ export default {
customIcon: '自定义图标', customIcon: '自定义图标',
customColor: '自定义颜色', customColor: '自定义颜色',
matchByName: '通过名称匹配', matchByName: '通过名称匹配',
switchEvent: '切换标签事件', switchEvent: '监听切换事件',
selectTip: '你切换到了' selectTip: '你切换到了'
}, },
'en-US': { 'en-US': {