vant/docs/markdown/en-US/tab.md

Tabs

Install

import { Tab, Tabs } from 'vant';

Vue.use(Tab).use(Tabs);

Usage

Basic Usage

By default, the first tab is actived. You can set active attribute on van-tabs to active specified tab.

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

export default {
  data() {
    return {
      active: 2
    };
  }
}

Swipe Tabs

By default more than 4 tabs, you can scroll through the tabs. You can set swipe-threshold attribute to customize threshold number.

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

Disabled Tab

You can set disabled attribute on the corresponding van-tab.

<van-tabs @disabled="onClickDisabled">
  <van-tab v-for="index in 4" :title="'tab' + index" :disabled="index === 2">
    content of tab {{ index }}
  </van-tab>
</van-tabs>

export default {
  methods: {
    onClickDisabled() {
      Toast('Disabled!');
    }
  }
};

Card Style

Tabs styled as cards.

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

Click Event

You can bind click event on van-tabs, the event handler function has one parameters: index of click tab.

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

export default {
  methods: {
    handleTabClick(index) {
      Toast(index);
    }
  }
};

Sticky

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

<van-tabs :active="active" sticky>
  <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 :active="active">
  <van-tab v-for="index in 2">
    <div slot="title">
      <van-icon name="more-o" />tab
    </div>
    content {{ index }}
  </van-tab>
</van-tabs>

Swipeable

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

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

Tabs API

Attribute	Description	Type	Default	Accepted Values
type	There are two style tabs, set this attribute to change tab style	String	line	card
active	Index of active tab	String Number	0	-
duration	Toggle tab's animation time	Number	0.2	-
swipe-threshold	Set swipe tabs threshold	Number	4	-
sticky	Whether to use sticky mode	Boolean	false	-
swipeable	Whether to switch tabs with swipe gestrue in the content	Boolean	false	-

Tab API

Attribute	Description	Type	Default	Accepted Values
title	Tab title	String	-	-
disabled	Whether disabled current tab	Boolean	false	-

Tab Slot

name	Description
-	Content
title	Custom tab

Tabs Event

Event	Description	Arguments
click	Triggered when click tab	index：index of current tab
disabled	Triggered when click disabled tab	index：index of current tab