## Tabs ### Install ``` javascript import { Tab, Tabs } from 'vant'; Vue.component(Tab.name, Tab); Vue.component(Tabs.name, Tabs); ``` ### Usage #### Basic Usage By default, the first tab is actived. :::demo Basic Usage ```html content of tab 1 content of tab 2 content of tab 3 content of tab 4 ``` ::: #### Active Specified tab You can set `active` attribute on `van-tabs` to active specified tab. :::demo Active Specified tab ```html content of tab 1 content of tab 2 content of tab 3 content of tab 4 ``` ::: #### Tab duration time You can use `duration` attribute to set tab duration time, the default time is `0.3s`. :::demo Tab duration time ```html content of tab 1 content of tab 2 content of tab 3 content of tab 4 ``` ::: #### Swipe Tabs By default more than 4 tabs, you can scroll through the tabs. You can set `swipeThreshold` attribute to customize threshold number. :::demo Swipe Tabs ```html content of tab 1 content of tab 2 content of tab 3 content of tab 4 content of tab 5 content of tab 6 content of tab 7 content of tab 8 ``` ::: #### Disabled Tab You can set `disabled` attribute on the corresponding `van-tab`. :::demo Disabled Tab ```html content of tab 1 content of tab 2 content of tab 3 content of tab 4 ``` ```javascript export default { methods: { onClickDisabled() { Toast('Disabled!'); } } }; ``` ::: #### Card Style Tabs styled as cards. :::demo Card Style ```html content of tab 1 content of tab 2 content of tab 3 content of tab 4 ``` ::: #### Custom Style You can set `css class` to customize tabs style. :::demo Custom Style ```html content of tab 1 content of tab 2 content of tab 3 content of tab 4 ``` ::: #### Click Event You can bind `click` event on `van-tabs`, the event handler function has one parameters: index of click tab. :::demo Click Event ```html content of tab 1 content of tab 2 content of tab 3 content of tab 4 ``` ```javascript export default { methods: { handleTabClick(index) { alert(index); } } }; ``` ::: ### van-tabs API | Attribute | Description | Type | Default | Accepted Values | |-----------|-----------|-----------|-------------|-------------| | type | There are two style tabs, set this attribute to change tab style | `String` | `line` | `line`, `card` | | active | Index of active tab | `String`, `Number` | `0` | - | | duration | Toggle tab's animation time | `Number` | `0.3` | - | - | | swipeThreshold | Set swipe tabs threshold | `Number` | `4` | - | - | ### van-tab API | Attribute | Description | Type | Default | Accepted Values | |-----------|-----------|-----------|-------------|-------------| | title | Tab title | `String` | - | - | | disabled | Whether disabled current tab | `Boolean` | `false` | - | ### van-tabs Event | Event | Description | Attribute | |-----------|-----------|-----------| | click | Triggered when click tab | index：index of current tab | | disabled | Triggered when click disabled tab | index：index of current tab |