mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 05:42:44 +08:00
docs(Tab): fix documentation errors (#12933)
This commit is contained in:
pany
GitHub
parent
6d1b953ab0
commit
0e5e8e5c45
@ -25,7 +25,7 @@ The first tab is active by default, you can set `v-model:active` to active speci
|
||||
|
||||
```html
|
||||
<van-tabs v-model:active="active">
|
||||
<van-tab v-for="index in 4" :title="'tab' + index">
|
||||
<van-tab v-for="index in 4" :title="'Tab ' + index">
|
||||
content of tab {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
@ -46,9 +46,9 @@ export default {
|
||||
|
||||
```html
|
||||
<van-tabs v-model:active="activeName">
|
||||
<van-tab title="tab 1" name="a">content of tab 1</van-tab>
|
||||
<van-tab title="tab 2" name="b">content of tab 2</van-tab>
|
||||
<van-tab title="tab 3" name="c">content of tab 3</van-tab>
|
||||
<van-tab title="Tab 1" name="a">content of tab 1</van-tab>
|
||||
<van-tab title="Tab 2" name="b">content of tab 2</van-tab>
|
||||
<van-tab title="Tab 3" name="c">content of tab 3</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
@ -69,7 +69,7 @@ By default more than 5 tabs, you can scroll through the tabs. You can set `swipe
|
||||
|
||||
```html
|
||||
<van-tabs v-model:active="active">
|
||||
<van-tab v-for="index in 8" :title="'tab' + index">
|
||||
<van-tab v-for="index in 8" :title="'Tab ' + index">
|
||||
content of tab {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
@ -81,7 +81,7 @@ Use `disabled` prop to disable a tab.
|
||||
|
||||
```html
|
||||
<van-tabs v-model:active="active">
|
||||
<van-tab v-for="index in 3" :title="'tab' + index" :disabled="index === 2">
|
||||
<van-tab v-for="index in 3" :title="'Tab ' + index" :disabled="index === 2">
|
||||
content of tab {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
@ -93,17 +93,17 @@ Tabs styled as cards.
|
||||
|
||||
```html
|
||||
<van-tabs v-model:active="active" type="card">
|
||||
<van-tab v-for="index in 3" :title="'tab' + index">
|
||||
<van-tab v-for="index in 3" :title="'Tab ' + index">
|
||||
content of tab {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
### Click Tab Event
|
||||
### Click Event
|
||||
|
||||
```html
|
||||
<van-tabs v-model:active="active" @click-tab="onClickTab">
|
||||
<van-tab v-for="index in 2" :title="'tab' + index">
|
||||
<van-tab v-for="index in 2" :title="'Tab ' + index">
|
||||
content of tab {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
@ -128,8 +128,8 @@ In sticky mode, the tab nav will be fixed to top when scroll to top.
|
||||
|
||||
```html
|
||||
<van-tabs v-model:active="active" sticky>
|
||||
<van-tab v-for="index in 4" :title="'tab ' + index">
|
||||
content {{ index }}
|
||||
<van-tab v-for="index in 4" :title="'Tab ' + index">
|
||||
content of tab {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
@ -140,21 +140,27 @@ In shrink mode, the tabs will be shrinked to the left.
|
||||
|
||||
```html
|
||||
<van-tabs v-model:active="active" shrink>
|
||||
<van-tab v-for="index in 4" :title="'tab ' + index">
|
||||
content {{ index }}
|
||||
<van-tab v-for="index in 4" :title="'Tab ' + index">
|
||||
content of tab {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
<van-tabs v-model:active="active" shrink type="card">
|
||||
<van-tab v-for="index in 4" :title="'Tab ' + index">
|
||||
content of tab {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
### Custom title
|
||||
### Custom Tab
|
||||
|
||||
Use title slot to custom tab title.
|
||||
|
||||
```html
|
||||
<van-tabs v-model:active="active">
|
||||
<van-tab v-for="index in 2">
|
||||
<template #title> <van-icon name="more-o" />tab </template>
|
||||
content {{ index }}
|
||||
<template #title><van-icon name="more-o" />Tab</template>
|
||||
content of tab {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
@ -165,8 +171,8 @@ Use `animated` props to change tabs with animation.
|
||||
|
||||
```html
|
||||
<van-tabs v-model:active="active" animated>
|
||||
<van-tab v-for="index in 4" :title="'tab ' + index">
|
||||
content {{ index }}
|
||||
<van-tab v-for="index in 4" :title="'Tab ' + index">
|
||||
content of tab {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
@ -177,8 +183,8 @@ In swipeable mode, you can switch tabs with swipe gesture in the content.
|
||||
|
||||
```html
|
||||
<van-tabs v-model:active="active" swipeable>
|
||||
<van-tab v-for="index in 4" :title="'tab ' + index">
|
||||
content {{ index }}
|
||||
<van-tab v-for="index in 4" :title="'Tab ' + index">
|
||||
content of tab {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
@ -189,8 +195,8 @@ In scrollspy mode, the list of content will be tiled.
|
||||
|
||||
```html
|
||||
<van-tabs v-model:active="active" scrollspy sticky>
|
||||
<van-tab v-for="index in 8" :title="'tab ' + index">
|
||||
content {{ index }}
|
||||
<van-tab v-for="index in 8" :title="'Tab ' + index">
|
||||
content of tab {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
@ -199,8 +205,8 @@ In scrollspy mode, the list of content will be tiled.
|
||||
|
||||
```html
|
||||
<van-tabs v-model:active="active" :before-change="beforeChange">
|
||||
<van-tab v-for="index in 4" :title="'tab ' + index">
|
||||
content {{ index }}
|
||||
<van-tab v-for="index in 4" :title="'Tab ' + index">
|
||||
content of tab {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
@ -239,7 +245,7 @@ By setting the `showHeader` prop to `false`, the title bar of the Tabs component
|
||||
|
||||
```html
|
||||
<van-tabs v-model:active="active" :show-header="false">
|
||||
<van-tab v-for="index in 4"> content {{ index }} </van-tab>
|
||||
<van-tab v-for="index in 4">content of tab {{ index }}</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
|
||||
@ -135,7 +135,7 @@ export default {
|
||||
|
||||
```html
|
||||
<van-tabs v-model:active="active" sticky>
|
||||
<van-tab v-for="index in 4" :title="'选项 ' + index">
|
||||
<van-tab v-for="index in 4" :title="'标签 ' + index">
|
||||
内容 {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
@ -149,7 +149,13 @@ export default {
|
||||
|
||||
```html
|
||||
<van-tabs v-model:active="active" shrink>
|
||||
<van-tab v-for="index in 4" :title="'选项 ' + index">
|
||||
<van-tab v-for="index in 4" :title="'标签 ' + index">
|
||||
内容 {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
<van-tabs v-model:active="active" shrink type="card">
|
||||
<van-tab v-for="index in 4" :title="'标签 ' + index">
|
||||
内容 {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
@ -162,7 +168,7 @@ export default {
|
||||
```html
|
||||
<van-tabs v-model:active="active">
|
||||
<van-tab v-for="index in 2">
|
||||
<template #title> <van-icon name="more-o" />选项 </template>
|
||||
<template #title><van-icon name="more-o" />标签</template>
|
||||
内容 {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
@ -174,7 +180,7 @@ export default {
|
||||
|
||||
```html
|
||||
<van-tabs v-model:active="active" animated>
|
||||
<van-tab v-for="index in 4" :title="'选项 ' + index">
|
||||
<van-tab v-for="index in 4" :title="'标签 ' + index">
|
||||
内容 {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
@ -186,7 +192,7 @@ export default {
|
||||
|
||||
```html
|
||||
<van-tabs v-model:active="active" swipeable>
|
||||
<van-tab v-for="index in 4" :title="'选项 ' + index">
|
||||
<van-tab v-for="index in 4" :title="'标签 ' + index">
|
||||
内容 {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
@ -198,7 +204,7 @@ export default {
|
||||
|
||||
```html
|
||||
<van-tabs v-model:active="active" scrollspy sticky>
|
||||
<van-tab v-for="index in 8" :title="'选项 ' + index">
|
||||
<van-tab v-for="index in 8" :title="'标签 ' + index">
|
||||
内容 {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
@ -210,7 +216,7 @@ export default {
|
||||
|
||||
```html
|
||||
<van-tabs v-model:active="active" :before-change="beforeChange">
|
||||
<van-tab v-for="index in 4" :title="'选项 ' + index">
|
||||
<van-tab v-for="index in 4" :title="'标签 ' + index">
|
||||
内容 {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
@ -250,7 +256,7 @@ export default {
|
||||
|
||||
```html
|
||||
<van-tabs v-model:active="active" :show-header="false">
|
||||
<van-tab v-for="index in 4"> 内容 {{ index }} </van-tab>
|
||||
<van-tab v-for="index in 4">内容 {{ index }}</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
|
||||
@ -8,10 +8,12 @@ const t = useTranslate({
|
||||
'zh-CN': {
|
||||
tab: '标签 ',
|
||||
shrink: '收缩布局',
|
||||
content: '内容',
|
||||
},
|
||||
'en-US': {
|
||||
tab: 'Tab ',
|
||||
shrink: 'Shrink',
|
||||
content: 'content of tab',
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@ -10,6 +10,7 @@ import Shrink from './Shrink.vue';
|
||||
const t = useTranslate({
|
||||
'zh-CN': {
|
||||
tab: '标签 ',
|
||||
content: '内容',
|
||||
title2: '标签栏滚动',
|
||||
title3: '禁用标签',
|
||||
title4: '样式风格',
|
||||
@ -19,7 +20,6 @@ const t = useTranslate({
|
||||
title8: '切换动画',
|
||||
title9: '滑动切换',
|
||||
title10: '滚动导航',
|
||||
disabled: ' 已被禁用',
|
||||
matchByName: '通过名称匹配',
|
||||
beforeChange: '异步切换',
|
||||
},
|
||||
@ -35,7 +35,6 @@ const t = useTranslate({
|
||||
title8: 'Switch Animation',
|
||||
title9: 'Swipeable',
|
||||
title10: 'Scrollspy',
|
||||
disabled: ' is disabled',
|
||||
matchByName: 'Match By Name',
|
||||
beforeChange: 'Before Change',
|
||||
},
|
||||
@ -81,9 +80,9 @@ const beforeChange = (name: number) => {
|
||||
|
||||
<demo-block :title="t('matchByName')">
|
||||
<van-tabs v-model:active="activeName">
|
||||
<van-tab name="a" :title="t('tab') + 1"> {{ t('content') }} 1 </van-tab>
|
||||
<van-tab name="b" :title="t('tab') + 2"> {{ t('content') }} 2 </van-tab>
|
||||
<van-tab name="c" :title="t('tab') + 3"> {{ t('content') }} 3 </van-tab>
|
||||
<van-tab name="a" :title="t('tab') + 1">{{ t('content') }} 1</van-tab>
|
||||
<van-tab name="b" :title="t('tab') + 2">{{ t('content') }} 2</van-tab>
|
||||
<van-tab name="c" :title="t('tab') + 3">{{ t('content') }} 3</van-tab>
|
||||
</van-tabs>
|
||||
</demo-block>
|
||||
|
||||
@ -137,7 +136,7 @@ const beforeChange = (name: number) => {
|
||||
<demo-block :title="t('title7')">
|
||||
<van-tabs v-model:active="active7">
|
||||
<van-tab v-for="index in 2" :key="index">
|
||||
<template #title> <van-icon name="more-o" />{{ t('tab') }} </template>
|
||||
<template #title><van-icon name="more-o" />{{ t('tab') }}</template>
|
||||
{{ t('content') }} {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
@ -781,7 +781,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
Content 1
|
||||
content of tab 1
|
||||
</div>
|
||||
<div
|
||||
id="van-tab"
|
||||
@ -878,7 +878,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
Content 1
|
||||
content of tab 1
|
||||
</div>
|
||||
<div
|
||||
id="van-tab"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user