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
+