[Doc] Tab: update document (#1757)

This commit is contained in:
neverland 2018-09-05 17:51:29 +08:00 committed by GitHub
parent ca91a1b498
commit 7f549e6519
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 12 deletions

View File

@ -139,6 +139,7 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
| Attribute | Description | Type | Default |
|-----------|-----------|-----------|-------------|
| v-model | Index of active tab | `String` `Number` | `0` |
| color | Tab color | `String` | `#f44` |
| 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 |
@ -146,7 +147,6 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
| sticky | Whether to use sticky mode | `Boolean` | `false` |
| offset-top | Offset top when use sticky mode | `Number` | `0` |
| swipeable | Whether to switch tabs with swipe gestrue in the content | `Boolean` | `false` |
| color | Set tab's title color | `String` | - |
### Tab API

View File

@ -11,13 +11,14 @@ Vue.use(Tab).use(Tabs);
#### 基础用法
默认情况下启用第一个 tab,可以通过`v-model`绑定当前激活的标签索引
默认情况下启用第一个标签,可以通过`v-model`绑定当前激活的标签索引
```html
<van-tabs v-model="active">
<van-tab v-for="index in 4" :title="'选项 ' + index">
内容 {{ index }}
</van-tab>
<van-tab title="标签 1">内容 1</van-tab>
<van-tab title="标签 2">内容 2</van-tab>
<van-tab title="标签 3">内容 3</van-tab>
<van-tab title="标签 4">内容 4</van-tab>
</van-tabs>
```
@ -33,7 +34,7 @@ export default {
#### 横向滚动
默认情况下多于4个tab时可以横向滚动tab。可以通过设置`swipe-threshold`这个阈值多于这个阈值时tab就会支持横向滚动。
多于 4 个标签时Tab 可以横向滚动
```html
<van-tabs>
@ -45,7 +46,7 @@ export default {
#### 禁用标签
在对应的`van-tab`设置`disabled`属性即可。如果需要监听禁用事件,可以在`van-tabs`上监听`disabled`事件
设置`disabled`属性即可禁用标签。如果需要监听禁用标签的点击事件,可以在`van-tabs`上监听`disabled`事件
```html
<van-tabs @disabled="onClickDisabled">
@ -67,7 +68,7 @@ export default {
#### 样式风格
`Tabs`目前有两种样式:`line``card`,默认为`line`样式,也就上面基础用法中的样式,你可以在`van-tabs`上设置`type``card`改为card样式。
`Tab`支持两种样式风格:`line``card`,默认为`line`样式,可以通过`type`属性修改样式风格
```html
<van-tabs type="card">
@ -100,6 +101,7 @@ export default {
```
#### 粘性布局
通过`sticky`属性可以开启粘性布局,粘性布局下,当 Tab 滚动到顶部时会自动吸顶
```html
@ -111,6 +113,7 @@ export default {
```
#### 自定义标签
通过 title slot 可以自定义标签内容
```html
@ -141,14 +144,14 @@ export default {
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
| v-model | 当前激活标签的索引 | `String` `Number` | `0` |
| type | 样式类型,可选值为 `line` `card` | `String` | `line` |
| duration | 切换 tab 的动画时间 | `Number` | `0.2` |
| color | 标签颜色 | `String` | `#f44` |
| type | 样式类型,可选值为`card` | `String` | `line` |
| duration | 动画时间 (单位秒) | `Number` | `0.2` |
| line-width | 底部条宽度 (px) | `Number` | 与当前标签等宽 |
| swipe-threshold | 滚动阈值,设置 Tab 超过多少个可滚动 | `Number` | `4` |
| swipe-threshold | 滚动阈值,设置标签数量超过多少个可滚动 | `Number` | `4` |
| sticky | 是否使用粘性定位布局 | `Boolean` | `false` |
| offset-top | 粘性定位布局下与顶部的最小距离 (px) | `Number` | `0` |
| swipeable | 是否可以滑动内容切换 | `Boolean` | `false` |
| color | 设置 tab 标题的颜色 | `String` | - |
### Tab API