Used to switch between different content areas.
\nRegister component globally via app.use, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Tab, Tabs } from 'vant';\n\nconst app = createApp();\napp.use(Tab);\napp.use(Tabs);\nThe first tab is active by default, you can set v-model:active to active specified tab.
<van-tabs v-model:active="active">\n <van-tab v-for="index in 4" :title="'tab' + index">\n content of tab {{ index }}\n </van-tab>\n</van-tabs>\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(0);\n return { active };\n },\n};\n<van-tabs v-model:active="activeName">\n <van-tab title="tab 1" name="a">content of tab 1</van-tab>\n <van-tab title="tab 2" name="b">content of tab 2</van-tab>\n <van-tab title="tab 3" name="c">content of tab 3</van-tab>\n</van-tabs>\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeName = ref('b');\n return { activeName };\n },\n};\nBy default more than 5 tabs, you can scroll through the tabs. You can set swipe-threshold attribute to customize threshold number.
<van-tabs v-model:active="active">\n <van-tab v-for="index in 8" :title="'tab' + index">\n content of tab {{ index }}\n </van-tab>\n</van-tabs>\nUse disabled prop to disable a tab.
<van-tabs v-model:active="active">\n <van-tab v-for="index in 3" :title="'tab' + index" :disabled="index === 2">\n content of tab {{ index }}\n </van-tab>\n</van-tabs>\nTabs styled as cards.
\n<van-tabs v-model:active="active" type="card">\n <van-tab v-for="index in 3" :title="'tab' + index">\n content of tab {{ index }}\n </van-tab>\n</van-tabs>\n<van-tabs v-model:active="active" @click-tab="onClickTab">\n <van-tab v-for="index in 2" :title="'tab' + index">\n content of tab {{ index }}\n </van-tab>\n</van-tabs>\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const onClickTab = ({ title }) => showToast(title);\n return {\n onClickTab,\n };\n },\n};\nIn sticky mode, the tab nav will be fixed to top when scroll to top.
\n<van-tabs v-model:active="active" sticky>\n <van-tab v-for="index in 4" :title="'tab ' + index">\n content {{ index }}\n </van-tab>\n</van-tabs>\nIn shrink mode, the tabs will be shrinked to the left.
\n<van-tabs v-model:active="active" shrink>\n <van-tab v-for="index in 4" :title="'tab ' + index">\n content {{ index }}\n </van-tab>\n</van-tabs>\nUse title slot to custom tab title.
\n<van-tabs v-model:active="active">\n <van-tab v-for="index in 2">\n <template #title> <van-icon name="more-o" />tab </template>\n content {{ index }}\n </van-tab>\n</van-tabs>\nUse animated props to change tabs with animation.
<van-tabs v-model:active="active" animated>\n <van-tab v-for="index in 4" :title="'tab ' + index">\n content {{ index }}\n </van-tab>\n</van-tabs>\nIn swipeable mode, you can switch tabs with swipe gesture in the content.
\n<van-tabs v-model:active="active" swipeable>\n <van-tab v-for="index in 4" :title="'tab ' + index">\n content {{ index }}\n </van-tab>\n</van-tabs>\nIn scrollspy mode, the list of content will be tiled.
\n<van-tabs v-model:active="active" scrollspy sticky>\n <van-tab v-for="index in 8" :title="'tab ' + index">\n content {{ index }}\n </van-tab>\n</van-tabs>\n<van-tabs v-model:active="active" :before-change="beforeChange">\n <van-tab v-for="index in 4" :title="'tab ' + index">\n content {{ index }}\n </van-tab>\n</van-tabs>\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(0);\n const beforeChange = (index) => {\n // prevent change\n if (index === 1) {\n return false;\n }\n\n // async\n return new Promise((resolve) => {\n setTimeout(() => resolve(index !== 3), 1000);\n });\n };\n\n return {\n active,\n beforeChange,\n };\n },\n};\n\n\nTips: The before-change callback will not be triggered by swiping gesture.
\n
By setting the showHeader prop to false, the title bar of the Tabs component can be hidden. In this case, you can control the active prop of the Tabs using custom components.
<van-tabs v-model:active="active" :show-header="false">\n <van-tab v-for="index in 4"> content {{ index }} </van-tab>\n</van-tabs>\n| Attribute | \nDescription | \nType | \nDefault | \n
|---|---|---|---|
| v-model:active | \nIndex of active tab | \nnumber | string | \n0 | \n
| type | \nCan be set to line card | \nstring | \nline | \n
| color | \nTab color | \nstring | \n#1989fa | \n
| background | \nBackground color | \nstring | \nwhite | \n
| duration | \nToggle tab\'s animation time | \nnumber | string | \n0.3 | \n
| line-width | \nWidth of tab line | \nnumber | string | \n40px | \n
| line-height | \nHeight of tab line | \nnumber | string | \n3px | \n
| animated | \nWhether to change tabs with animation | \nboolean | \nfalse | \n
| border | \nWhether to show border when type="line" | \nboolean | \nfalse | \n
| ellipsis | \nWhether to ellipsis too long title | \nboolean | \ntrue | \n
| sticky | \nWhether to use sticky mode | \nboolean | \nfalse | \n
| shrink | \nWhether to shrink the the tabs to the left | \nboolean | \nfalse | \n
| swipeable | \nWhether to enable gestures to slide left and right | \nboolean | \nfalse | \n
| lazy-render | \nWhether to enable tab content lazy render | \nboolean | \ntrue | \n
| scrollspy | \nWhether to use scrollspy mode | \nboolean | \nfalse | \n
show-header v4.7.3 | \nWhether to show title bar | \nboolean | \ntrue | \n
| offset-top | \nSticky offset top , supports px vw vh rem unit, default px | \nnumber | string | \n0 | \n
| swipe-threshold | \nSet swipe tabs threshold | \nnumber | string | \n5 | \n
| title-active-color | \nTitle active color | \nstring | \n- | \n
| title-inactive-color | \nTitle inactive color | \nstring | \n- | \n
| before-change | \nCallback function before changing tabs, return false to prevent change, support return Promise | \n(name: number | string) => boolean | Promise<boolean> | \n- | \n
| Attribute | \nDescription | \nType | \nDefault | \n
|---|---|---|---|
| title | \nTitle | \nstring | \n- | \n
| disabled | \nWhether to disable tab | \nboolean | \nfalse | \n
| dot | \nWhether to show red dot on the title | \nboolean | \nfalse | \n
| badge | \nContent of the badge on the title | \nnumber | string | \n- | \n
| name | \nIdentifier | \nnumber | string | \nIndex of tab | \n
| url | \nLink | \nstring | \n- | \n
| to | \nThe target route should navigate to when clicked on, same as the to prop of Vue Router | \nstring | object | \n- | \n
| replace | \nIf true, the navigation will not leave a history record | \nboolean | \nfalse | \n
| title-style | \nCustom title style | \nstring | Array | object | \n- | \n
| title-class | \nCustom title class name | \nstring | Array | object | \n- | \n
| show-zero-badge | \nWhether to show badge when the value is zero | \nboolean | \ntrue | \n
| Event | \nDescription | \nArguments | \n
|---|---|---|
| click-tab | \nEmitted when a tab is clicked | \n{ name: string | number, title: string, event: MouseEvent, disabled: boolean } | \n
| change | \nEmitted when active tab changed | \nname: string | number, title: string | \n
| rendered | \nEmitted when content first rendered in lazy-render mode | \nname: string | number, title: string | \n
| scroll | \nEmitted when tab scrolling in sticky mode | \n{ scrollTop: number, isFixed: boolean } | \n
Use ref to get Tabs instance and call instance methods.
\n| Name | \nDescription | \nAttribute | \nReturn value | \n
|---|---|---|---|
| resize | \nResize Tabs when container element resized or visibility changed | \n- | \n- | \n
| scrollTo | \nGo to specified tab in scrollspy mode | \nname: string | number | \n- | \n
The component exports the following type definitions:
\nimport type { TabProps, TabsType, TabsProps, TabsInstance } from 'vant';\nTabsInstance is the type of component instance:
import { ref } from 'vue';\nimport type { TabsInstance } from 'vant';\n\nconst tabsRef = ref<TabsInstance>();\n\ntabsRef.value?.scrollTo(0);\n| Name | \nDescription | \n
|---|---|
| nav-left | \nCustom nav left content | \n
| nav-right | \nCustom nav right content | \n
| nav-bottom | \nCustom nav bottom content | \n
| Name | \nDescription | \n
|---|---|
| default | \nContent of tab | \n
| title | \nCustom tab title | \n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\n| Name | \nDefault Value | \nDescription | \n
|---|---|---|
| --van-tab-text-color | \nvar(--van-gray-7) | \n- | \n
| --van-tab-active-text-color | \nvar(--van-text-color) | \n- | \n
| --van-tab-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
| --van-tab-font-size | \nvar(--van-font-size-md) | \n- | \n
| --van-tab-line-height | \nvar(--van-line-height-md) | \n- | \n
| --van-tabs-default-color | \nvar(--van-primary-color) | \n- | \n
| --van-tabs-line-height | \n44px | \n- | \n
| --van-tabs-card-height | \n30px | \n- | \n
| --van-tabs-nav-background | \nvar(--van-background-2) | \n- | \n
| --van-tabs-bottom-bar-width | \n40px | \n- | \n
| --van-tabs-bottom-bar-height | \n3px | \n- | \n
| --van-tabs-bottom-bar-color | \nvar(--van-primary-color) | \n- | \n