blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-25 10:56:35 +08:00
Code Issues Projects Releases Wiki Activity

[Doc]: add tab english docs (#308)

Browse Source
This commit is contained in:
张敏 2017-11-11 01:58:12 -06:00 committed by GitHub
parent 5e8c5a7b6c
commit a5fddb9535
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 188 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

257
docs/examples-docs/en-US/tab.md
View File

@ -1,4 +1,31 @@
<style>
.demo-tab {
.van-tab__pane {
background-color: #fff;
padding: 20px;
}
.van-tabs--card .van-tab__pane {
background-color: transparent;
}
.custom-tabwrap .van-tab-active {
color: #20a0ff;
}
.custom-tabwrap .van-tabs-nav-bar {
background: #20a0ff;
}
.custom-pane {
text-align: center;
height: 50px;
line-height: 50px;
}
}
</style>
<script> <script>
import { Toast } from 'packages/index';
export default { export default {
data() { data() {
return { return {
@ -11,8 +38,8 @@ export default {
}, 1000); }, 1000);
}, },
methods: { methods: {
popalert() { onClickDisabled() {
alert('haha') Toast('Disabled!');
}, },
handleTabClick(index) { handleTabClick(index) {
@ -22,7 +49,7 @@ export default {
}; };
</script> </script>
## Tab ## Tabs
### Install ### Install
``` javascript ``` javascript
@ -36,103 +63,170 @@ Vue.component(Tabs.name, Tabs);
#### Basic Usage #### Basic Usage
默认情况下是启用第一个`tab`。 By default, the first tab is actived.
:::demo Basic Usage :::demo Basic Usage
```html ```html
<van-tabs> <van-tabs>
<van-tab title="选项一">内容一</van-tab> <van-tab title="tab 1">
<van-tab title="选项二">内容二</van-tab> content of tab 1
<van-tab title="选项三">内容三</van-tab> </van-tab>
<van-tab title="选项四">内容四</van-tab> <van-tab title="tab 2">
content of tab 2
</van-tab>
<van-tab title="tab 3">
content of tab 3
</van-tab>
<van-tab title="tab 4">
content of tab 4
</van-tab>
</van-tabs> </van-tabs>
``` ```
::: :::
#### 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 ```html
<van-tabs :active="active"> <van-tabs :active="active">
<van-tab title="选项一">内容一</van-tab> <van-tab title="tab 1">
<van-tab title="选项二">内容二</van-tab> content of tab 1
<van-tab title="选项三">内容三</van-tab> </van-tab>
<van-tab title="选项四">内容四</van-tab> <van-tab title="tab 2">
content of tab 2
</van-tab>
<van-tab title="tab 3">
content of tab 3
</van-tab>
<van-tab title="tab 4">
content of tab 4
</van-tab>
</van-tabs> </van-tabs>
<script>
export default {
data() {
return {
active: 2
};
}
}
</script>
``` ```
::: :::
#### 设置切换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 ```html
<van-tabs :duration="0.6"> <van-tabs :duration="0.6">
<van-tab title="选项一">内容一</van-tab> <van-tab title="tab 1">
<van-tab title="选项二">内容二</van-tab> content of tab 1
<van-tab title="选项三">内容三</van-tab> </van-tab>
<van-tab title="tab 2">
content of tab 2
</van-tab>
<van-tab title="tab 3">
content of tab 3
</van-tab>
<van-tab title="tab 4">
content of tab 4
</van-tab>
</van-tabs> </van-tabs>
``` ```
::: :::
#### 横向滚动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 ```html
<van-tabs> <van-tabs>
<van-tab title="选项一">内容一</van-tab> <van-tab title="tab 1">
<van-tab title="选项二">内容二</van-tab> content of tab 1
<van-tab title="选项三">内容三</van-tab> </van-tab>
<van-tab title="选项四">内容四</van-tab> <van-tab title="tab 2">
<van-tab title="选项五">内容五</van-tab> content of tab 2
<van-tab title="选项六">内容六</van-tab> </van-tab>
<van-tab title="选项七">内容七</van-tab> <van-tab title="tab 3">
<van-tab title="选项八">内容八</van-tab> content of tab 3
</van-tab>
<van-tab title="tab 4">
content of tab 4
</van-tab>
<van-tab title="tab 5">
content of tab 5
</van-tab>
<van-tab title="tab 6">
content of tab 6
</van-tab>
<van-tab title="tab 7">
content of tab 7
</van-tab>
<van-tab title="tab 8">
content of tab 8
</van-tab>
</van-tabs> </van-tabs>
``` ```
::: :::
#### 禁用tab #### Disabled Tab
在对应的`van-tab`上设置`disabled`属性即可，如果需要监听禁用事件，可以监听`disabled`事件。 You can set `disabled` attribute on the corresponding `van-tab`.
:::demo 禁用tab :::demo Disabled Tab
```html ```html
<van-tabs> <van-tabs @disabled="onClickDisabled">
<van-tab title="选项一">内容一</van-tab> <van-tab title="tab 1">
<van-tab title="选项二" disabled @disabled="popalert">内容二</van-tab> content of tab 1
<van-tab title="选项三">内容三</van-tab> </van-tab>
<van-tab title="选项四">内容四</van-tab> <van-tab title="tab 2">
content of tab 2
</van-tab>
<van-tab title="tab 3">
content of tab 3
</van-tab>
<van-tab title="tab 4">
content of tab 4
</van-tab>
</van-tabs> </van-tabs>
``` ```
```javascript ```javascript
export default { export default {
methods: { methods: {
popalert() { onClickDisabled() {
alert('haha') Toast('Disabled!');
} }
} }
}; };
``` ```
::: :::
#### card样式 #### Card Style
`Tabs`目前有两种样式：`line`和`card`，默认为`line`样式，也就上面基础用法中的样式，你可以在`van-tabs`上设置`type`为`card`改为card样式。 Tabs styled as cards.
:::demo card样式 :::demo Card Style
```html ```html
<van-tabs type="card"> <van-tabs type="card">
<van-tab title="选项一">内容一</van-tab> <van-tab title="tab 1">
<van-tab title="选项二">内容二</van-tab> content of tab 1
<van-tab title="选项三">内容三</van-tab> </van-tab>
<van-tab title="选项四">内容四</van-tab> <van-tab title="tab 2">
content of tab 2
</van-tab>
<van-tab title="tab 3">
content of tab 3
</van-tab>
<van-tab title="tab 4">
content of tab 4
</van-tab>
</van-tabs> </van-tabs>
``` ```
::: :::
@ -150,17 +244,25 @@ export default {
} }
</style> </style>
#### 自定义样式 #### Custom Style
可以在`van-tabs`上设置对应的`class`，从而自定义某些样式。 You can set `css class` to customize tabs style.
:::demo 自定义样式 :::demo Custom Style
```html ```html
<van-tabs active="2" class="custom-tabwrap"> <van-tabs active="2" class="custom-tabwrap">
<van-tab title="选项一" class="custom-pane">内容一</van-tab> <van-tab title="tab 1" class="custom-pane">
<van-tab title="选项二" class="custom-pane">内容二</van-tab> content of tab 1
<van-tab title="选项三" class="custom-pane">内容三</van-tab> </van-tab>
<van-tab title="选项四" class="custom-pane">内容四</van-tab> <van-tab title="tab 2" class="custom-pane">
content of tab 2
</van-tab>
<van-tab title="tab 3" class="custom-pane">
content of tab 3
</van-tab>
<van-tab title="tab 4" class="custom-pane">
content of tab 4
</van-tab>
</van-tabs> </van-tabs>
<style> <style>
@ -179,17 +281,25 @@ export default {
``` ```
::: :::
#### click事件 #### Click Event
可以在`van-tabs`上绑定一个`click`事件，事件处理函数有一个参数，参数为对应`tab`在`tabs`中的索引。 You can bind `click` event on `van-tabs`, the event handler function has one parameters: index of click tab.
:::demo click事件 :::demo Click Event
```html ```html
<van-tabs @click="handleTabClick"> <van-tabs @click="handleTabClick">
<van-tab title="选项一">内容一</van-tab> <van-tab title="tab 1" class="custom-pane">
<van-tab title="选项二">内容二</van-tab> content of tab 1
<van-tab title="选项三">内容三</van-tab> </van-tab>
<van-tab title="选项四">内容四</van-tab> <van-tab title="tab 2" class="custom-pane">
content of tab 2
</van-tab>
<van-tab title="tab 3" class="custom-pane">
content of tab 3
</van-tab>
<van-tab title="tab 4" class="custom-pane">
content of tab 4
</van-tab>
</van-tabs> </van-tabs>
``` ```
@ -206,25 +316,24 @@ export default {
### van-tabs API ### van-tabs API
| Attribute | Description | Type | Default | 可选 | | Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| classtype | 两种UI | `String` | `line` | `line`, `card` | | type | There are two style tabs, set this attribute to change tab style | `String` | `line` | `line`, `card` |
| active | 默认激活的tab | `String`, `Number` | `0` | - | | active | Index of active tab | `String`, `Number` | `0` | - |
| navclass | tabs的内部nav上的自定义classname | `String` | - | - | | duration | Toggle tab's animation time | `Number` | `0.3` | - | - |
| duration | 切换tab的动画时间 | `Number` | `0.3` | - | - | | swipeThreshold | Set swipe tabs threshold | `Number` | `4` | - | - |
### van-tab API ### van-tab API
| Attribute | Description | Type | Default | 可选 | | Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| title | tab的标题 | `String` | - | - | | title | Tab title | `String` | - | - |
| disabled | 是否禁用这个tab | `Boolean` | `false` | - | | disabled | Whether disabled current tab | `Boolean` | `false` | - |
### van-tabs Event ### van-tabs Event
| Event | Description | Attribute | | Event | Description | Attribute |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| click | 某个tab点击事件 | index：点击的`tab`的索引 | | click | Triggered when click tab | index：index of current tab |
| disabled | 某个tab禁用时点击事件 | index：点击的`tab`的索引 | | disabled | Triggered when click disabled tab | index：index of current tab |

10
docs/examples-docs/zh-CN/tab.md
View File

@ -39,7 +39,7 @@ export default {
}, },
methods: { methods: {
onClickDisabled() { onClickDisabled() {
Toast('Disabled!') Toast('Disabled!');
}, },
handleTabClick(index) { handleTabClick(index) {
@ -49,7 +49,7 @@ export default {
}; };
</script> </script>
## Tab 标签页 ## Tabs 标签页
### 使用指南 ### 使用指南
``` javascript ``` javascript
@ -126,7 +126,7 @@ Vue.component(Tabs.name, Tabs);
#### 禁用tab #### 禁用tab
在对应的`van-tab`上设置`disabled`属性即可，如果需要监听禁用事件，可以监听`disabled`事件。 在对应的`van-tab`上设置`disabled`属性即可。如果需要监听禁用事件，可以在`van-tabs`上监听`disabled`事件。
:::demo 禁用tab :::demo 禁用tab
```html ```html
@ -235,10 +235,10 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选 | | 参数 | 说明 | 类型 | 默认值 | 可选 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| classtype | 两种UI | `String` | `line` | `line`, `card` | | type | 两种UI | `String` | `line` | `line`, `card` |
| active | 默认激活的tab | `String`, `Number` | `0` | - | | active | 默认激活的tab | `String`, `Number` | `0` | - |
| navclass | tabs的内部nav上的自定义classname | `String` | - | - |
| duration | 切换tab的动画时间 | `Number` | `0.3` | - | - | | duration | 切换tab的动画时间 | `Number` | `0.3` | - | - |
| swipeThreshold | 滚动阀值，默认是超过4个tab时标签页可滚动，通过这个属性可以设置超过多少个可滚动 | `Number` | `4` | - | - |
### van-tab API ### van-tab API