ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-18 17:51:54 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Improvement] Tab: support v-model bind active tab (#879)

Browse Source
This commit is contained in:
neverland
2018-04-16 19:11:48 +08:00
committed by GitHub
parent 2ce0803ffe
commit ed1bff1052
4 changed files with 29 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/markdown/en-US/tab.md
View File

@@ -11,10 +11,10 @@ Vue.use(Tab).use(Tabs);
#### Basic Usage
By default, the first tab is actived. You can set `active` attribute on `van-tabs` to active specified tab.
The first tab is actived by default, you can set `v-model` to active specified tab.
```html
<van-tabs :active="active">
<van-tabs v-model="active">
<van-tab v-for="index in 4" :title="'tab' + index">
content of tab {{ index }}
</van-tab>
@@ -101,7 +101,7 @@ export default {
In sticky mode, the tab will be fixed to top when scroll to top
```html
<van-tabs :active="active" sticky>
<van-tabs v-model="active" sticky>
<van-tab v-for="index in 4" :title="'tab ' + index">
content {{ index }}
</van-tab>
@@ -112,7 +112,7 @@ In sticky mode, the tab will be fixed to top when scroll to top
Use title slot to custom tab title
```html
<van-tabs :active="active">
<van-tabs v-model="active">
<van-tab v-for="index in 2">
<div slot="title">
<van-icon name="more-o" />tab
@@ -127,7 +127,7 @@ Use title slot to custom tab title
In swipeable mode, you can switch tabs with swipe gestrue in the content
```html
<van-tabs :active="active" swipeable>
<van-tabs v-model="active" swipeable>
<van-tab v-for="index in 4" :title="'tab ' + index">
content {{ index }}
</van-tab>
@@ -138,8 +138,8 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| v-model | Index of active tab | `String` `Number` | `0` | - |
| 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` | - |