From 7f549e6519b1d72ae583fd775fa19356d0360dab Mon Sep 17 00:00:00 2001 From: neverland Date: Wed, 5 Sep 2018 17:51:29 +0800 Subject: [PATCH] [Doc] Tab: update document (#1757) --- packages/tab/en-US.md | 2 +- packages/tab/zh-CN.md | 25 ++++++++++++++----------- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/packages/tab/en-US.md b/packages/tab/en-US.md index b38819525..a66845432 100644 --- a/packages/tab/en-US.md +++ b/packages/tab/en-US.md @@ -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 diff --git a/packages/tab/zh-CN.md b/packages/tab/zh-CN.md index 8067f71d8..f3b107a7e 100644 --- a/packages/tab/zh-CN.md +++ b/packages/tab/zh-CN.md @@ -11,13 +11,14 @@ Vue.use(Tab).use(Tabs); #### 基础用法 -默认情况下启用第一个 tab,可以通过`v-model`绑定当前激活的标签索引 +默认情况下启用第一个标签,可以通过`v-model`绑定当前激活的标签索引 ```html - - 内容 {{ index }} - + 内容 1 + 内容 2 + 内容 3 + 内容 4 ``` @@ -33,7 +34,7 @@ export default { #### 横向滚动 -默认情况下多于4个tab时,可以横向滚动tab。可以通过设置`swipe-threshold`这个阈值,多于这个阈值时,tab就会支持横向滚动。 +多于 4 个标签时,Tab 可以横向滚动 ```html @@ -45,7 +46,7 @@ export default { #### 禁用标签 -在对应的`van-tab`上设置`disabled`属性即可。如果需要监听禁用事件,可以在`van-tabs`上监听`disabled`事件。 +设置`disabled`属性即可禁用标签。如果需要监听禁用标签的点击事件,可以在`van-tabs`上监听`disabled`事件 ```html @@ -67,7 +68,7 @@ export default { #### 样式风格 -`Tabs`目前有两种样式:`line`和`card`,默认为`line`样式,也就上面基础用法中的样式,你可以在`van-tabs`上设置`type`为`card`改为card样式。 +`Tab`支持两种样式风格:`line`和`card`,默认为`line`样式,可以通过`type`属性修改样式风格 ```html @@ -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