vant/src/tab/README.md

Tab

Install

import Vue from 'vue';
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
    };
  }
}

Match By Name

<van-tabs v-model="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>

export default {
  data() {
    return {
      activeName: 'a'
    };
  }
}

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 3" :title="'tab' + index" :disabled="index === 2">
    content of tab {{ index }}
  </van-tab>
</van-tabs>

export default {
  methods: {
    onClickDisabled(name, title) {
      this.$toast(title + ' is disabled');
    }
  }
};

Card Style

Tabs styled as cards.

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

Click Event

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

export default {
  methods: {
    onClick(name, 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>

Switch Animation

Use animated props to change tabs with animation

<van-tabs v-model="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 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>

Scrollspy

In scrollspy mode, the list of content will be tiled

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

API

Tabs Props

Attribute	Description	Type	Default	Version
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.3	-
background	Background color	string	white	-
line-width	Width of tab line	string | number	Width of active tab	-
line-height	Height of tab line	string | number	3px	-
color	Tab color	string	#ee0a24	-
title-active-color	Title active color	string	-	-
title-inactive-color	Title inactive color	string	-	-
swipe-threshold	Set swipe tabs threshold	number	4	-
offset-top	Offset top when use sticky mode	number	0	-
animated	Whether to change tabs with animation	boolean	false	-
border	Whether to show border when type="line"	boolean	true	-
ellipsis	Whether to ellipsis too long title	boolean	true	-
sticky	Whether to use sticky mode	boolean	false	-
swipeable	Whether to switch tabs with swipe gestrue in the content	boolean	false	-
lazy-render	Whether to enable tab content lazy render	boolean	true	-
scrollspy	Whether to use scrollspy mode	boolean	false	2.3.0

Tab Props

Attribute	Description	Type	Default	Version
name	Identifier	string | number	Index of tab	-
title	Title	string	-	-
title-style	Custom title style	any	-	2.2.14
disabled	Whether to disable tab	boolean	false	-
dot	Whether to show red dot on the title	boolean	false	2.3.0
info	Content of the badge on the title	string | number	-	2.3.0
url	Link	string	-	2.2.1
to	Target route of the link, same as to of vue-router	string | object	-	2.2.1
replace	If true, the navigation will not leave a history record	boolean	false	2.2.1

Tabs Events

Event	Description	Arguments
click	Triggered when click tab	name：name of current tab，title: tab title
change	Triggered when active tab changed	name：name of current tab，title: tab title
disabled	Triggered when click disabled tab	name：name of current tab, title: tab title
scroll	Triggered when tab scroll in sticky mode	object: { scrollTop, isFixed }

Tabs Methods

Use ref to get Tabs instance and call instance methods

Name	Description	Attribute	Return value
resize	Resize Tabs when container element resized	-	void

Tabs Slots

Name	Description
nav-left	Custom nav left content
nav-right	Custom nav right content

Tab Slots

Name	Description
default	Content of tab
title	Custom tab title