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

[Doc] Tabbar: update demo

Browse Source
This commit is contained in:
陈嘉涵 2019-05-05 11:40:59 +08:00
parent 4d8d482e04
commit a8738bbcae
4 changed files with 75 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/tabbar/demo/index.vue
View File

@ -2,6 +2,15 @@
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="$t('basicUsage')">
<van-tabbar v-model="active"> <van-tabbar v-model="active">
<van-tabbar-item icon="home-o">{{ $t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="search">{{ $t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="friends-o">{{ $t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item>
</van-tabbar>
</demo-block>
<demo-block :title="$t('badge')">
<van-tabbar v-model="active2">
<van-tabbar-item icon="home-o">{{ $t('tab') }}</van-tabbar-item> <van-tabbar-item icon="home-o">{{ $t('tab') }}</van-tabbar-item>
<van-tabbar-item <van-tabbar-item
icon="search" icon="search"
@ -25,7 +34,7 @@
</demo-block> </demo-block>
<demo-block :title="$t('customIcon')"> <demo-block :title="$t('customIcon')">
<van-tabbar v-model="active2"> <van-tabbar v-model="active3">
<van-tabbar-item info="3"> <van-tabbar-item info="3">
<span>{{ $t('custom') }}</span> <span>{{ $t('custom') }}</span>
<img <img
@ -41,7 +50,7 @@
<demo-block :title="$t('customColor')"> <demo-block :title="$t('customColor')">
<van-tabbar <van-tabbar
v-model="active3" v-model="active4"
active-color="#07c160" active-color="#07c160"
inactive-color="#000" inactive-color="#000"
> >
@ -58,11 +67,13 @@
export default { export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
badge: '显示徽标',
customIcon: '自定义图标', customIcon: '自定义图标',
customColor: '自定义颜色' customColor: '自定义颜色'
}, },
'en-US': { 'en-US': {
customIcon: 'Custom icon', badge: 'Show Badge',
customIcon: 'Custom Icon',
customColor: 'Custom Color' customColor: 'Custom Color'
} }
}, },
@ -72,6 +83,7 @@ export default {
active: 0, active: 0,
active2: 0, active2: 0,
active3: 0, active3: 0,
active4: 0,
icon: { icon: {
normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png', normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png' active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'

19
packages/tabbar/en-US.md
View File

@ -14,9 +14,9 @@ Vue.use(Tabbar).use(TabbarItem);
```html ```html
<van-tabbar v-model="active"> <van-tabbar v-model="active">
<van-tabbar-item icon="home-o">Tab</van-tabbar-item> <van-tabbar-item icon="home-o">Tab</van-tabbar-item>
<van-tabbar-item icon="search" dot>Tab</van-tabbar-item> <van-tabbar-item icon="search">Tab</van-tabbar-item>
<van-tabbar-item icon="friends-o" info="5">Tab</van-tabbar-item> <van-tabbar-item icon="friends-o">Tab</van-tabbar-item>
<van-tabbar-item icon="setting-o" info="20">Tab</van-tabbar-item> <van-tabbar-item icon="setting-o">Tab</van-tabbar-item>
</van-tabbar> </van-tabbar>
``` ```
@ -30,7 +30,18 @@ export default {
} }
``` ```
#### Custom icon #### Show Badge
```html
<van-tabbar v-model="active">
<van-tabbar-item icon="home-o">Tab</van-tabbar-item>
<van-tabbar-item icon="search" dot>Tab</van-tabbar-item>
<van-tabbar-item icon="friends-o" info="5">Tab</van-tabbar-item>
<van-tabbar-item icon="setting-o" info="20">Tab</van-tabbar-item>
</van-tabbar>
```
#### Custom Icon
Use `icon` slot to custom icon Use `icon` slot to custom icon

32
packages/tabbar/test/__snapshots__/demo.spec.js.snap
View File

@ -2,6 +2,38 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<div>
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index:1;">
<div class="van-tabbar-item">
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
<!----></i>
<!---->
</div>
<div class="van-tabbar-item__text">标签</div>
</div>
<div class="van-tabbar-item">
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-search">
<!----></i>
<!---->
</div>
<div class="van-tabbar-item__text">标签</div>
</div>
<div class="van-tabbar-item">
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-friends-o">
<!----></i>
<!---->
</div>
<div class="van-tabbar-item__text">标签</div>
</div>
<div class="van-tabbar-item">
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o">
<!----></i>
<!---->
</div>
<div class="van-tabbar-item__text">标签</div>
</div>
</div>
</div>
<div> <div>
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index:1;"> <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index:1;">
<div class="van-tabbar-item"> <div class="van-tabbar-item">

16
packages/tabbar/zh-CN.md
View File

@ -14,9 +14,9 @@ Vue.use(Tabbar).use(TabbarItem);
```html ```html
<van-tabbar v-model="active"> <van-tabbar v-model="active">
<van-tabbar-item icon="home-o">标签</van-tabbar-item> <van-tabbar-item icon="home-o">标签</van-tabbar-item>
<van-tabbar-item icon="search" dot>标签</van-tabbar-item> <van-tabbar-item icon="search">标签</van-tabbar-item>
<van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item> <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
<van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item> <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar> </van-tabbar>
``` ```
@ -30,6 +30,16 @@ export default {
} }
``` ```
#### 显示徽标
```html
<van-tabbar v-model="active">
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
<van-tabbar-item icon="search" dot>标签</van-tabbar-item>
<van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>
<van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
</van-tabbar>
```
#### 自定义图标 #### 自定义图标