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

Tab

Install

import { Tab, Tabs } from 'vant';

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

Usage

Basic Usage

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

<van-tabs v-model="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(index, title) {
      this.$toast(title + ' is 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

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

export default {
  methods: {
    onClick(index, title) {
      this.$toast(title);
    }
  }
};

Sticky

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

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

Tabs API

Attribute	Description	Type	Default
v-model	Index of active tab	String Number	0
type	Can be set to line card	String	line
duration	Toggle tab's animation time	Number	0.2
line-width	Width of tab line (px)	Number	Width of active tab
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
title	Title	String	-
disabled	Whether to disable 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，title: tab title
disabled	Triggered when click disabled tab	index：index of current tab, title: tab title