From a5fddb95350a546df2ca965c9f24fddedc5c5e1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=95=8F?= Date: Sat, 11 Nov 2017 01:58:12 -0600 Subject: [PATCH] [Doc]: add tab english docs (#308) --- docs/examples-docs/en-US/tab.md | 257 +++++++++++++++++++++++--------- docs/examples-docs/zh-CN/tab.md | 10 +- 2 files changed, 188 insertions(+), 79 deletions(-) diff --git a/docs/examples-docs/en-US/tab.md b/docs/examples-docs/en-US/tab.md index bf3583f87..bfa597b0a 100644 --- a/docs/examples-docs/en-US/tab.md +++ b/docs/examples-docs/en-US/tab.md @@ -1,4 +1,31 @@ + + -## Tab +## Tabs ### Install ``` javascript @@ -36,103 +63,170 @@ Vue.component(Tabs.name, Tabs); #### Basic Usage -默认情况下是启用第一个`tab`。 +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特定tab +#### Active Specified tab -可以在`van-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`，默认为0。 +You can set `active` attribute on `van-tabs` to active specified tab. -:::demo Basic Usage +:::demo Active Specified tab ```html - 内容一 - 内容二 - 内容三 - 内容四 + + content of tab 1 + + + content of tab 2 + + + content of tab 3 + + + content of tab 4 + + + ``` ::: -#### 设置切换tab的动画时间 +#### Tab duration time -通过设置`duration`来指定时间，默认为0.3s，只接受`Number`类型参数。 +You can use `duration` attribute to set tab duration time, the default time is `0.3s`. -:::demo 设置切换tab的动画时间 +:::demo Tab duration time ```html - 内容一 - 内容二 - 内容三 + + content of tab 1 + + + content of tab 2 + + + content of tab 3 + + + content of tab 4 + ``` ::: -#### 横向滚动tab +#### Swipe Tabs -默认情况下多于4个tab时，可以横向滚动tab。可以通过设置`swipeThreshold`这个阙值，多于这个阙值时，tab就会支持横向滚动。 +By default more than 4 tabs, you can scroll through the tabs. You can set `swipeThreshold` attribute to customize threshold number. -:::demo 横向滚动tab +:::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 + ``` ::: -#### 禁用tab +#### Disabled Tab -在对应的`van-tab`上设置`disabled`属性即可，如果需要监听禁用事件，可以监听`disabled`事件。 +You can set `disabled` attribute on the corresponding `van-tab`. -:::demo 禁用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: { - popalert() { - alert('haha') + onClickDisabled() { + Toast('Disabled!'); } } }; ``` ::: -#### card样式 +#### Card Style -`Tabs`目前有两种样式：`line`和`card`，默认为`line`样式，也就上面基础用法中的样式，你可以在`van-tabs`上设置`type`为`card`改为card样式。 +Tabs styled as cards. -:::demo card样式 +:::demo Card Style ```html - 内容一 - 内容二 - 内容三 - 内容四 + + content of tab 1 + + + content of tab 2 + + + content of tab 3 + + + content of tab 4 + ``` ::: @@ -150,17 +244,25 @@ export default { } -#### 自定义样式 +#### Custom Style -可以在`van-tabs`上设置对应的`class`，从而自定义某些样式。 +You can set `css class` to customize tabs style. -:::demo 自定义样式 +:::demo Custom Style ```html - 内容一 - 内容二 - 内容三 - 内容四 + + content of tab 1 + + + content of tab 2 + + + content of tab 3 + + + content of tab 4 +