Intro

Used to switch between different content areas.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from 'vue';
import { Tab, Tabs } from 'vant';

const app = createApp();
app.use(Tab);
app.use(Tabs);

Basic Usage

The first tab is active by default, you can set v-model:active to active specified tab.

<van-tabs v-model:active="active">
  <van-tab v-for="index in 4" :title="'tab' + index">
    content of tab {{ index }}
  </van-tab>
</van-tabs>

import { ref } from 'vue';

export default {
  setup() {
    const active = ref(0);
    return { active };
  },
};

Match By Name

<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-tabs>

import { ref } from 'vue';

export default {
  setup() {
    const activeName = ref('a');
    return { activeName };
  },
};

Swipe Tabs

By 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">
  <van-tab v-for="index in 8" :title="'tab' + index">
    content of tab {{ index }}
  </van-tab>
</van-tabs>

Disabled Tab

Use disabled prop to disable a tab.

<van-tabs v-model:active="active">
  <van-tab v-for="index in 3" :title="'tab' + index" :disabled="index === 2">
    content of tab {{ index }}
  </van-tab>
</van-tabs>

Card Style

Tabs styled as cards.

<van-tabs v-model:active="active" type="card">
  <van-tab v-for="index in 3" :title="'tab' + index">
    content of tab {{ index }}
  </van-tab>
</van-tabs>

Click Tab Event

<van-tabs v-model:active="active" @click-tab="onClickTab">
  <van-tab v-for="index in 2" :title="'tab' + index">
    content of tab {{ index }}
  </van-tab>
</van-tabs>

import { Toast } from 'vant';

export default {
  setup() {
    const onClickTab = ({ title }) => Toast(title);
    return {
      onClickTab,
    };
  },
};

Sticky

In sticky mode, the tab nav will be fixed to top when scroll to top.

<van-tabs v-model:active="active" sticky>
  <van-tab v-for="index in 4" :title="'tab ' + index">
    content {{ index }}
  </van-tab>
</van-tabs>

Shrink

In shrink mode, the tabs will be shrinked to the left.

<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.

<van-tabs v-model:active="active">
  <van-tab v-for="index in 2">
    <template #title> <van-icon name="more-o" />tab </template>
    content {{ index }}
  </van-tab>
</van-tabs>

Switch Animation

Use animated props to change tabs with animation.

<van-tabs v-model:active="active" animated>
  <van-tab v-for="index in 4" :title="'tab ' + index">
    content {{ index }}
  </van-tab>
</van-tabs>

Swipeable

In swipeable mode, you can switch tabs with swipe gesture in the content.

<van-tabs v-model:active="active" swipeable>
  <van-tab v-for="index in 4" :title="'tab ' + index">
    content {{ index }}
  </van-tab>
</van-tabs>

Scrollspy

In scrollspy mode, the list of content will be tiled.

<van-tabs v-model:active="active" scrollspy sticky>
  <van-tab v-for="index in 8" :title="'tab ' + index">
    content {{ index }}
  </van-tab>
</van-tabs>

Before Change

<van-tabs v-model:active="active" :before-change="beforeChange">
  <van-tab v-for="index in 4" :title="'tab ' + index">
    content {{ index }}
  </van-tab>
</van-tabs>

import { ref } from 'vue';

export default {
  setup() {
    const active = ref(0);
    const beforeChange = (index) => {
      // prevent change
      if (index === 1) {
        return false;
      }

      // async
      return new Promise((resolve) => {
        resolve(index !== 3);
      });
    };

    return {
      active,
      beforeChange,
    };
  },
};

Tabs Props

Attribute	Description	Type	Default
v-model:active	Index of active tab	number \| string	`0`
type	Can be set to `line` `card`	string	`line`
color	Tab color	string	`#ee0a24`
background	Background color	string	`white`
duration	Toggle tab's animation time	number \| string	`0.3`
line-width	Width of tab line	number \| string	`40px`
line-height	Height of tab line	number \| string	`3px`
animated	Whether to change tabs with animation	boolean	`false`
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`
offset-top	Sticky offset top , supports `px` `vw` `vh` `rem` unit, default `px`	number \| string	`0`
swipe-threshold	Set swipe tabs threshold	number \| string	`5`
title-active-color	Title active color	string	-
title-inactive-color	Title inactive color	string	-
before-change	Callback function before changing tabs, return `false` to prevent change, support return Promise	(name: number \| string) => boolean \| Promise<boolean>	-

Tab Props

Attribute	Description	Type	Default
title	Title	string	-
disabled	Whether to disable tab	boolean	`false`
dot	Whether to show red dot on the title	boolean	`false`
badge	Content of the badge on the title	number \| string	-
name	Identifier	number \| string	Index of tab
url	Link	string	-
to	Target route of the link, same as to of vue-router	string \| object	-
replace	If true, the navigation will not leave a history record	boolean	`false`
title-style	Custom title style	string \| Array \| object	-
title-class	Custom title class name	string \| Array \| object	-
show-zero-badge `v3.2.2`	Whether to show badge when the value is zero	boolean	`true`

Tabs Events

Event	Description	Arguments
click-tab `v3.1.4`	Emitted when a tab is clicked	{ name: string \| number, title: string, event: MouseEvent, disabled: boolean }
change	Emitted when active tab changed	name: string \| number, title: string
rendered	Emitted when content first rendered in lazy-render mode	name: string \| number, title: string
scroll	Emitted when tab scrolling in sticky mode	{ scrollTop: number, isFixed: boolean }

Tips: click and disabled event is deprecated, place use click-tab event instead.

Tabs Methods

Use ref to get Tabs instance and call instance methods.

Name	Description	Attribute	Return value
resize	Resize Tabs when container element resized or visibility changed	-	-
scrollTo	Go to specified tab in scrollspy mode	name: string \| number	-

Types

The component exports the following type definitions:

import type { TabProps, TabsType, TabsProps, TabsInstance } from 'vant';

TabsInstance is the type of component instance:

import { ref } from 'vue';
import type { TabsInstance } from 'vant';

const tabsRef = ref<TabsInstance>();

tabsRef.value?.scrollTo(0);

Tabs Slots

Name	Description
nav-left	Custom nav left content
nav-right	Custom nav right content
nav-bottom `v3.1.1`	Custom nav bottom content

Tab Slots

Name	Description
default	Content of tab
title	Custom tab title

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-tab-text-color	var(--van-gray-7)	-
--van-tab-active-text-color	var(--van-text-color)	-
--van-tab-disabled-text-color	var(--van-text-color-3)	-
--van-tab-font-size	var(--van-font-size-md)	-
--van-tab-line-height	var(--van-line-height-md)	-
--van-tabs-default-color	var(--van-danger-color)	-
--van-tabs-line-height	44px	-
--van-tabs-card-height	30px	-
--van-tabs-nav-background-color	var(--van-background-color-light)	-
--van-tabs-bottom-bar-width	40px	-
--van-tabs-bottom-bar-height	3px	-
--van-tabs-bottom-bar-color	var(--van-danger-color)	-

Tab