mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Doc]: add tab english docs (#308)
This commit is contained in:
张敏
GitHub
parent
5e8c5a7b6c
commit
a5fddb9535
@ -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>
|
||||
import { Toast } from 'packages/index';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -11,8 +38,8 @@ export default {
|
||||
}, 1000);
|
||||
},
|
||||
methods: {
|
||||
popalert() {
|
||||
alert('haha')
|
||||
onClickDisabled() {
|
||||
Toast('Disabled!');
|
||||
},
|
||||
|
||||
handleTabClick(index) {
|
||||
@ -22,7 +49,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
## 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
|
||||
<van-tabs>
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="tab 1">
|
||||
content of tab 1
|
||||
</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>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 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
|
||||
<van-tabs :active="active">
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="tab 1">
|
||||
content of tab 1
|
||||
</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>
|
||||
|
||||
<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
|
||||
<van-tabs :duration="0.6">
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="tab 1">
|
||||
content of tab 1
|
||||
</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>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 横向滚动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
|
||||
<van-tabs>
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
<van-tab title="选项六">内容六</van-tab>
|
||||
<van-tab title="选项七">内容七</van-tab>
|
||||
<van-tab title="选项八">内容八</van-tab>
|
||||
<van-tab title="tab 1">
|
||||
content of tab 1
|
||||
</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-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>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用tab
|
||||
#### Disabled Tab
|
||||
|
||||
在对应的`van-tab`上设置`disabled`属性即可，如果需要监听禁用事件，可以监听`disabled`事件。
|
||||
You can set `disabled` attribute on the corresponding `van-tab`.
|
||||
|
||||
:::demo 禁用tab
|
||||
:::demo Disabled Tab
|
||||
```html
|
||||
<van-tabs>
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二" disabled @disabled="popalert">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tabs @disabled="onClickDisabled">
|
||||
<van-tab title="tab 1">
|
||||
content of tab 1
|
||||
</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>
|
||||
```
|
||||
|
||||
```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
|
||||
<van-tabs type="card">
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="tab 1">
|
||||
content of tab 1
|
||||
</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>
|
||||
```
|
||||
:::
|
||||
@ -150,17 +244,25 @@ export default {
|
||||
}
|
||||
</style>
|
||||
|
||||
#### 自定义样式
|
||||
#### Custom Style
|
||||
|
||||
可以在`van-tabs`上设置对应的`class`，从而自定义某些样式。
|
||||
You can set `css class` to customize tabs style.
|
||||
|
||||
:::demo 自定义样式
|
||||
:::demo Custom Style
|
||||
```html
|
||||
<van-tabs active="2" class="custom-tabwrap">
|
||||
<van-tab title="选项一" class="custom-pane">内容一</van-tab>
|
||||
<van-tab title="选项二" class="custom-pane">内容二</van-tab>
|
||||
<van-tab title="选项三" class="custom-pane">内容三</van-tab>
|
||||
<van-tab title="选项四" class="custom-pane">内容四</van-tab>
|
||||
<van-tab title="tab 1" class="custom-pane">
|
||||
content of tab 1
|
||||
</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>
|
||||
|
||||
<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
|
||||
<van-tabs @click="handleTabClick">
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="tab 1" class="custom-pane">
|
||||
content of tab 1
|
||||
</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>
|
||||
```
|
||||
|
||||
@ -206,25 +316,24 @@ export default {
|
||||
|
||||
### van-tabs API
|
||||
|
||||
| Attribute | Description | Type | Default | 可选 |
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| classtype | 两种UI | `String` | `line` | `line`, `card` |
|
||||
| active | 默认激活的tab | `String`, `Number` | `0` | - |
|
||||
| navclass | tabs的内部nav上的自定义classname | `String` | - | - |
|
||||
| duration | 切换tab的动画时间 | `Number` | `0.3` | - | - |
|
||||
|
||||
| type | There are two style tabs, set this attribute to change tab style | `String` | `line` | `line`, `card` |
|
||||
| active | Index of active tab | `String`, `Number` | `0` | - |
|
||||
| duration | Toggle tab's animation time | `Number` | `0.3` | - | - |
|
||||
| swipeThreshold | Set swipe tabs threshold | `Number` | `4` | - | - |
|
||||
|
||||
### van-tab API
|
||||
|
||||
| Attribute | Description | Type | Default | 可选 |
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | tab的标题 | `String` | - | - |
|
||||
| disabled | 是否禁用这个tab | `Boolean` | `false` | - |
|
||||
| title | Tab title | `String` | - | - |
|
||||
| disabled | Whether disabled current tab | `Boolean` | `false` | - |
|
||||
|
||||
### van-tabs Event
|
||||
|
||||
| Event | Description | Attribute |
|
||||
|-----------|-----------|-----------|
|
||||
| click | 某个tab点击事件 | index：点击的`tab`的索引 |
|
||||
| disabled | 某个tab禁用时点击事件 | index：点击的`tab`的索引 |
|
||||
| click | Triggered when click tab | index：index of current tab |
|
||||
| disabled | Triggered when click disabled tab | index：index of current tab |
|
||||
|
||||
|
||||
@ -39,7 +39,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
onClickDisabled() {
|
||||
Toast('Disabled!')
|
||||
Toast('Disabled!');
|
||||
},
|
||||
|
||||
handleTabClick(index) {
|
||||
@ -49,7 +49,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
## Tab 标签页
|
||||
## Tabs 标签页
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
@ -126,7 +126,7 @@ Vue.component(Tabs.name, Tabs);
|
||||
|
||||
#### 禁用tab
|
||||
|
||||
在对应的`van-tab`上设置`disabled`属性即可，如果需要监听禁用事件，可以监听`disabled`事件。
|
||||
在对应的`van-tab`上设置`disabled`属性即可。如果需要监听禁用事件，可以在`van-tabs`上监听`disabled`事件。
|
||||
|
||||
:::demo 禁用tab
|
||||
```html
|
||||
@ -235,10 +235,10 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| classtype | 两种UI | `String` | `line` | `line`, `card` |
|
||||
| type | 两种UI | `String` | `line` | `line`, `card` |
|
||||
| active | 默认激活的tab | `String`, `Number` | `0` | - |
|
||||
| navclass | tabs的内部nav上的自定义classname | `String` | - | - |
|
||||
| duration | 切换tab的动画时间 | `Number` | `0.3` | - | - |
|
||||
| swipeThreshold | 滚动阀值，默认是超过4个tab时标签页可滚动，通过这个属性可以设置超过多少个可滚动 | `Number` | `4` | - | - |
|
||||
|
||||
|
||||
### van-tab API
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user