blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-22 06:31:45 +08:00
Code Issues Projects Releases Wiki Activity

feat(Tabs): add shrink prop (#10125)

Browse Source
This commit is contained in:
neverland 2021-12-30 15:26:59 +08:00 committed by GitHub
parent 55303595af
commit 1f6faa93cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 398 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
View File

@ -82,7 +82,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-cascader__tab"
class="van-tab van-tab--line van-cascader__tab"
tabindex="-1"
aria-selected="false"
>
@ -92,7 +92,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--active van-cascader__tab van-cascader__tab--unselected"
class="van-tab van-tab--line van-tab--active van-cascader__tab van-cascader__tab--unselected"
tabindex="0"
aria-selected="true"
>

16
packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap
View File

@ -33,7 +33,7 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -44,7 +44,7 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -325,7 +325,7 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
>
<div id="van-tabs-0"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -336,7 +336,7 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -437,7 +437,7 @@ exports[`should render list-footer slot correctly 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -448,7 +448,7 @@ exports[`should render list-footer slot correctly 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -551,7 +551,7 @@ exports[`should use custom src when using empty-image prop 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -562,7 +562,7 @@ exports[`should use custom src when using empty-image prop 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"

6
packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap
View File

@ -20,7 +20,7 @@ exports[`should render demo and match snapshot 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -31,7 +31,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -42,7 +42,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"

8
packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap
View File

@ -11,7 +11,7 @@ exports[`should render demo and match snapshot 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -22,7 +22,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -33,7 +33,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -44,7 +44,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-3"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"

4
packages/vant/src/index-bar/test/__snapshots__/demo.spec.ts.snap
View File

@ -9,7 +9,7 @@ exports[`should render demo and match snapshot 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -20,7 +20,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"

6
packages/vant/src/list/test/__snapshots__/demo.spec.ts.snap
View File

@ -9,7 +9,7 @@ exports[`should render demo and match snapshot 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -20,7 +20,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -31,7 +31,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"

6
packages/vant/src/pull-refresh/test/__snapshots__/demo.spec.ts.snap
View File

@ -9,7 +9,7 @@ exports[`should render demo and match snapshot 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -20,7 +20,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -31,7 +31,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"

15
packages/vant/src/tab/README.md
View File

@ -124,7 +124,7 @@ export default {
### Sticky
In sticky mode, the tab will be fixed to top when scroll to top.
In sticky mode, the tab nav will be fixed to top when scroll to top.
```html
<van-tabs v-model:active="active" sticky>
@ -134,6 +134,18 @@ In sticky mode, the tab will be fixed to top when scroll to top.
</van-tabs>
```
### Shrink
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>
</van-tabs>
```
### Custom title
Use title slot to custom tab title.
@ -236,6 +248,7 @@ export default {
| border | Whether to show border when `type="line"` | _boolean_ | `false` |
| ellipsis | Whether to ellipsis too long title | _boolean_ | `true` |
| sticky | Whether to use sticky mode | _boolean_ | `false` |
| shrink `v3.2.8` | Whether to shrink the the tabs to the left | _boolean_ | `false` |
| swipeable | Whether to enable gestures to slide left and right | _boolean_ | `false` |
| lazy-render | Whether to enable tab content lazy render | _boolean_ | `true` |
| scrollspy | Whether to use scrollspy mode | _boolean_ | `false` |

13
packages/vant/src/tab/README.zh-CN.md
View File

@ -143,6 +143,18 @@ export default {
> Tips: 如果页面顶部有其他内容，可以通过 offset-top 属性设置吸顶时与顶部的距离。
### 收缩布局
通过 `shrink` 属性可以开启收缩布局，开启后，所有的标签会向左侧收缩对齐。
```html
<van-tabs v-model:active="active" shrink>
<van-tab v-for="index in 4" :title="'选项 ' + index">
内容 {{ index }}
</van-tab>
</van-tabs>
```
### 自定义标签
通过 `title` 插槽可以自定义标签内容。
@ -249,6 +261,7 @@ export default {
| border | 是否显示标签栏外边框，仅在 `type="line"` 时有效 | _boolean_ | `false` |
| ellipsis | 是否省略过长的标题文字 | _boolean_ | `true` |
| sticky | 是否使用粘性布局 | _boolean_ | `false` |
| shrink `v3.2.8` | 是否开启左侧收缩布局 | _boolean_ | `false` |
| swipeable | 是否开启手势左右滑动切换 | _boolean_ | `false` |
| lazy-render | 是否开启延迟渲染（首次切换到标签时才触发内容渲染） | _boolean_ | `true` |
| scrollspy | 是否开启滚动导航 | _boolean_ | `false` |

41
packages/vant/src/tab/demo/Shrink.vue Normal file
View File

@ -0,0 +1,41 @@
<script setup lang="ts">
import { ref } from 'vue';
import VanTabs from '../../tabs';
import VanTab from '..';
import { useTranslate } from '../../../docs/site/use-translate';
const t = useTranslate({
'zh-CN': {
tab: '标签 ',
shrink: '收缩布局',
},
'en-US': {
tab: 'Tab ',
shrink: 'Shrink',
},
});
const tabs = [1, 2, 3, 4];
const active1 = ref(0);
const active2 = ref(0);
</script>
<template>
<demo-block :title="t('shrink')">
<van-tabs v-model:active="active1" shrink>
<van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
</van-tabs>
<van-tabs
v-model:active="active2"
type="card"
shrink
style="margin-top: var(--van-padding-lg)"
>
<van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
</van-tabs>
</demo-block>
</template>

3
packages/vant/src/tab/demo/index.vue
View File

@ -5,6 +5,7 @@ import VanIcon from '../../icon';
import { ref } from 'vue';
import { useTranslate } from '../../../docs/site/use-translate';
import { Toast } from '../../toast';
import Shrink from './Shrink.vue';
const t = useTranslate({
'zh-CN': {
@ -131,6 +132,8 @@ const beforeChange = (name: number) => {
</van-tabs>
</demo-block>
<shrink />
<demo-block :title="t('title7')">
<van-tabs v-model:active="active7">
<van-tab v-for="index in 2" :key="index">

280
packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap
View File

@ -10,7 +10,7 @@ exports[`should render demo and match snapshot 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -21,7 +21,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -32,7 +32,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -43,7 +43,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-3"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -104,7 +104,7 @@ exports[`should render demo and match snapshot 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -115,7 +115,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -126,7 +126,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -179,7 +179,7 @@ exports[`should render demo and match snapshot 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -190,7 +190,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -201,7 +201,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -212,7 +212,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-3"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -223,7 +223,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-4"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -234,7 +234,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-5"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -245,7 +245,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-6"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -256,7 +256,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-7"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -349,7 +349,7 @@ exports[`should render demo and match snapshot 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -360,7 +360,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--disabled"
class="van-tab van-tab--line van-tab--disabled"
aria-selected="false"
aria-disabled="true"
aria-controls="van-tab"
@ -371,7 +371,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -424,7 +424,7 @@ exports[`should render demo and match snapshot 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--card van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -435,7 +435,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab"
class="van-tab van-tab--card"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -446,7 +446,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab"
class="van-tab van-tab--card"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -495,7 +495,7 @@ exports[`should render demo and match snapshot 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -506,7 +506,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -553,7 +553,7 @@ exports[`should render demo and match snapshot 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -564,7 +564,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -575,7 +575,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -586,7 +586,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-3"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -640,6 +640,188 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
</div>
<div>
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--line van-tabs__nav--shrink"
aria-orientation="horizontal"
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--line van-tab--shrink van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 1
</span>
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--line van-tab--shrink"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 2
</span>
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--line van-tab--shrink"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 3
</span>
</div>
<div id="van-tabs-3"
role="tab"
class="van-tab van-tab--line van-tab--shrink"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 4
</span>
</div>
<div class="van-tabs__line"
style="transform: translateX(50px) translateX(-50%);"
>
</div>
</div>
</div>
<div class="van-tabs__content">
<div id="van-tab"
role="tabpanel"
class="van-tab__panel"
tabindex="0"
aria-labelledby="van-tabs-0"
style
>
Content 1
</div>
<div id="van-tab"
role="tabpanel"
class="van-tab__panel"
tabindex="-1"
aria-labelledby="van-tabs-1"
style="display: none;"
>
</div>
<div id="van-tab"
role="tabpanel"
class="van-tab__panel"
tabindex="-1"
aria-labelledby="van-tabs-2"
style="display: none;"
>
</div>
<div id="van-tab"
role="tabpanel"
class="van-tab__panel"
tabindex="-1"
aria-labelledby="van-tabs-3"
style="display: none;"
>
</div>
</div>
</div>
<div class="van-tabs van-tabs--card">
<div class="van-tabs__wrap">
<div role="tablist"
class="van-tabs__nav van-tabs__nav--card van-tabs__nav--shrink"
aria-orientation="horizontal"
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--card van-tab--shrink van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 1
</span>
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--card van-tab--shrink"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 2
</span>
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--card van-tab--shrink"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 3
</span>
</div>
<div id="van-tabs-3"
role="tab"
class="van-tab van-tab--card van-tab--shrink"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 4
</span>
</div>
</div>
</div>
<div class="van-tabs__content">
<div id="van-tab"
role="tabpanel"
class="van-tab__panel"
tabindex="0"
aria-labelledby="van-tabs-0"
style
>
Content 1
</div>
<div id="van-tab"
role="tabpanel"
class="van-tab__panel"
tabindex="-1"
aria-labelledby="van-tabs-1"
style="display: none;"
>
</div>
<div id="van-tab"
role="tabpanel"
class="van-tab__panel"
tabindex="-1"
aria-labelledby="van-tabs-2"
style="display: none;"
>
</div>
<div id="van-tab"
role="tabpanel"
class="van-tab__panel"
tabindex="-1"
aria-labelledby="van-tabs-3"
style="display: none;"
>
</div>
</div>
</div>
</div>
<div>
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap">
@ -649,7 +831,7 @@ exports[`should render demo and match snapshot 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -662,7 +844,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -709,7 +891,7 @@ exports[`should render demo and match snapshot 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
>
@ -719,7 +901,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
>
@ -729,7 +911,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
>
@ -739,7 +921,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-3"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
>
@ -814,7 +996,7 @@ exports[`should render demo and match snapshot 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
>
@ -824,7 +1006,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
>
@ -834,7 +1016,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
>
@ -844,7 +1026,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-3"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
>
@ -921,7 +1103,7 @@ exports[`should render demo and match snapshot 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -932,7 +1114,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -943,7 +1125,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -954,7 +1136,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-3"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -965,7 +1147,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-4"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -976,7 +1158,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-5"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -987,7 +1169,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-6"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -998,7 +1180,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-7"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -1092,7 +1274,7 @@ exports[`should render demo and match snapshot 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -1103,7 +1285,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -1114,7 +1296,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -1125,7 +1307,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div id="van-tabs-3"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"

40
packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap
View File

@ -53,7 +53,7 @@ exports[`should allow to set name prop 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -64,7 +64,7 @@ exports[`should allow to set name prop 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -75,7 +75,7 @@ exports[`should allow to set name prop 1`] = `
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--disabled"
class="van-tab van-tab--line van-tab--disabled"
aria-selected="false"
aria-disabled="true"
aria-controls="van-tab"
@ -140,7 +140,7 @@ exports[`should not render empty tab 1`] = `
exports[`should render badge prop correctly 1`] = `
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -164,7 +164,7 @@ exports[`should render nav-left、nav-right slot correctly 1`] = `
Custom nav left
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -191,7 +191,7 @@ exports[`should switch tab after click the tab title 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -202,7 +202,7 @@ exports[`should switch tab after click the tab title 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -213,7 +213,7 @@ exports[`should switch tab after click the tab title 1`] = `
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--disabled"
class="van-tab van-tab--line van-tab--disabled"
aria-selected="false"
aria-disabled="true"
aria-controls="van-tab"
@ -267,7 +267,7 @@ exports[`should switch tab after click the tab title 2`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -278,7 +278,7 @@ exports[`should switch tab after click the tab title 2`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -289,7 +289,7 @@ exports[`should switch tab after click the tab title 2`] = `
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--disabled"
class="van-tab van-tab--line van-tab--disabled"
aria-selected="false"
aria-disabled="true"
aria-controls="van-tab"
@ -344,7 +344,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
>
@ -354,7 +354,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
>
@ -364,7 +364,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--disabled"
class="van-tab van-tab--line van-tab--disabled"
aria-selected="false"
aria-disabled="true"
>
@ -431,7 +431,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
>
@ -441,7 +441,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
>
@ -451,7 +451,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--disabled"
class="van-tab van-tab--line van-tab--disabled"
aria-selected="false"
aria-disabled="true"
>
@ -521,7 +521,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
>
@ -531,7 +531,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
>
@ -541,7 +541,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--disabled"
class="van-tab van-tab--line van-tab--disabled"
aria-selected="false"
aria-disabled="true"
>

16
packages/vant/src/tab/test/__snapshots__/insert.spec.tsx.snap
View File

@ -9,7 +9,7 @@ exports[`should render Tab inside a component correctly 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -20,7 +20,7 @@ exports[`should render Tab inside a component correctly 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -31,7 +31,7 @@ exports[`should render Tab inside a component correctly 1`] = `
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -85,7 +85,7 @@ exports[`should render correctly after inserting a tab 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -96,7 +96,7 @@ exports[`should render correctly after inserting a tab 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
@ -107,7 +107,7 @@ exports[`should render correctly after inserting a tab 1`] = `
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -163,7 +163,7 @@ exports[`should render correctly after inserting a tab with name 1`] = `
>
<div id="van-tabs-0"
role="tab"
class="van-tab"
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
@ -174,7 +174,7 @@ exports[`should render correctly after inserting a tab with name 1`] = `
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--active"
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"

7
packages/vant/src/tabs/Tabs.tsx
View File

@ -65,6 +65,7 @@ const tabsProps = {
color: String,
border: Boolean,
sticky: Boolean,
shrink: Boolean,
active: makeNumericProp(0),
duration: makeNumericProp(0.3),
animated: Boolean,
@ -368,6 +369,7 @@ export default defineComponent({
color={props.color}
style={item.titleStyle}
class={item.titleClass}
shrink={props.shrink}
isActive={index === state.currentIndex}
controls={item.id}
scrollable={scrollable.value}
@ -403,7 +405,10 @@ export default defineComponent({
<div
ref={navRef}
role="tablist"
class={bem('nav', [type, { complete: scrollable.value }])}
class={bem('nav', [
type,
{ shrink: props.shrink, complete: scrollable.value },
])}
style={navStyle.value}
aria-orientation="horizontal"
>

9
packages/vant/src/tabs/TabsTitle.tsx
View File

@ -14,6 +14,7 @@ export default defineComponent({
color: String,
title: String,
badge: numericProp,
shrink: Boolean,
isActive: Boolean,
disabled: Boolean,
controls: String,
@ -79,10 +80,14 @@ export default defineComponent({
id={props.id}
role="tab"
class={[
bem({
bem([
props.type,
{
shrink: props.shrink,
active: props.isActive,
disabled: props.disabled,
}),
},
]),
]}
style={style.value}
tabindex={props.disabled ? undefined : props.isActive ? 0 : -1}

44
packages/vant/src/tabs/index.less
View File

@ -38,6 +38,30 @@
cursor: not-allowed;
}
&--shrink {
flex: none;
padding: 0 var(--van-padding-xs);
}
&--card {
color: var(--van-tabs-default-color);
border-right: var(--van-border-width-base) solid
var(--van-tabs-default-color);
&:last-child {
border-right: none;
}
&.van-tab--active {
color: var(--van-white);
background-color: var(--van-tabs-default-color);
}
&--disabled {
color: var(--van-tab-disabled-text-color);
}
}
&__text {
&--ellipsis {
display: -webkit-box;
@ -93,6 +117,7 @@
padding-bottom: 15px; /* 15px padding to hide scrollbar in mobile safari */
}
&--line&--shrink,
&--line&--complete {
padding-right: var(--van-padding-xs);
padding-left: var(--van-padding-xs);
@ -104,25 +129,10 @@
margin: 0 var(--van-padding-md);
border: var(--van-border-width-base) solid var(--van-tabs-default-color);
border-radius: var(--van-border-radius-sm);
.van-tab {
color: var(--van-tabs-default-color);
border-right: var(--van-border-width-base) solid
var(--van-tabs-default-color);
&:last-child {
border-right: none;
}
&.van-tab--active {
color: var(--van-white);
background-color: var(--van-tabs-default-color);
}
&--disabled {
color: var(--van-tab-disabled-text-color);
}
}
&--card&--shrink {
display: inline-flex;
}
}