## Tab
### Install
``` javascript
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.
```html
content of tab {{ index }}
```
```js
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.
```html
content of tab {{ index }}
```
#### Disabled Tab
You can set `disabled` attribute on the corresponding `van-tab`.
```html
content of tab {{ index }}
```
```javascript
export default {
methods: {
onClickDisabled(index, title) {
this.$toast(title + ' is disabled');
}
}
};
```
#### Card Style
Tabs styled as cards.
```html
content of tab {{ index }}
```
#### Click Event
```html
content of tab {{ index }}
```
```javascript
export default {
methods: {
onClick(index, title) {
this.$toast(title);
}
}
};
```
#### Sticky
In sticky mode, the tab will be fixed to top when scroll to top
```html
content {{ index }}
```
#### Custom title
Use title slot to custom tab title
```html
tab
content {{ index }}
```
#### Swipeable
In swipeable mode, you can switch tabs with swipe gestrue in the content
```html
content {{ index }}
```
### 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 |