mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Doc] Tab: update document (#1757)
This commit is contained in:
parent
ca91a1b498
commit
7f549e6519
@ -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
|
||||
|
||||
|
@ -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
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user