mirror of https://github.com/ElemeFE/element
148 lines
4.3 KiB
Markdown
148 lines
4.3 KiB
Markdown
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
activeName: 'first'
|
|
}
|
|
},
|
|
methods: {
|
|
handleRemove(tab) {
|
|
console.log(tab);
|
|
},
|
|
handleClick(tab, event) {
|
|
console.log(tab, event);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
## Tabs
|
|
|
|
Divide data collections which are related yet belong to different types.
|
|
|
|
### Basic usage
|
|
|
|
Basic and concise tabs.
|
|
|
|
:::demo Tabs provide a selective card functionality and it can be achieved by just using `el-tabs` and child element `el-tab-pane`. In these two elements, we provide a list of attributes. The `label` in `el-tab-pane` determines the label of selective cards, and you can write content in the label. In this example, we add a `active-name` attribute indicating the active card in `el-tabs`, which can take a `String` value. In the `el-tab-pane` you can set corresponding `name` attribute, and if there is no `name`, the default sequence is `1`/`2`/`3`/`4`. In this example, the selected card is card 2. If `name` is omitted, setting `active-name` to `2` can reach the same goal.
|
|
|
|
```html
|
|
<template>
|
|
<el-tabs :active-name="activeName">
|
|
<el-tab-pane label="User" name="first">User</el-tab-pane>
|
|
<el-tab-pane label="Config" name="second">Config</el-tab-pane>
|
|
<el-tab-pane label="Role" name="third">Role</el-tab-pane>
|
|
<el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
|
|
</el-tabs>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
activeName: 'first'
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
### Card Style
|
|
|
|
Tabs styled as cards.
|
|
|
|
:::demo Set `type` to `card` can get a card-styled tab.
|
|
|
|
```html
|
|
<template>
|
|
<el-tabs type="card" @tab-click="handleClick" @tab-remove="handleRemove">
|
|
<el-tab-pane label="User">User</el-tab-pane>
|
|
<el-tab-pane label="Config">Config</el-tab-pane>
|
|
<el-tab-pane label="Role">Role</el-tab-pane>
|
|
<el-tab-pane label="Task">Task</el-tab-pane>
|
|
</el-tabs>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
handleRemove(tab) {
|
|
console.log(tab);
|
|
},
|
|
handleClick(tab, event) {
|
|
console.log(tab, event);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
### Closable
|
|
|
|
Closable tabs.
|
|
|
|
:::demo You can set `closable` attribute in `el-tabs`. It accept `Boolean` and Tab will be closable when the boolean is `true`.
|
|
|
|
```html
|
|
<template>
|
|
<el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove">
|
|
<el-tab-pane label="User">User</el-tab-pane>
|
|
<el-tab-pane label="Config">Config</el-tab-pane>
|
|
<el-tab-pane label="Role">Role</el-tab-pane>
|
|
<el-tab-pane label="Task">Task</el-tab-pane>
|
|
</el-tabs>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
handleRemove(tab) {
|
|
console.log(tab);
|
|
},
|
|
handleClick(tab, event) {
|
|
console.log(tab, event);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
```
|
|
|
|
:::
|
|
|
|
### Border card
|
|
|
|
Border card tabs.
|
|
|
|
:::demo Set `type` to `border-card`.
|
|
|
|
```html
|
|
<el-tabs type="border-card">
|
|
<el-tab-pane label="User">User</el-tab-pane>
|
|
<el-tab-pane label="Config">Config</el-tab-pane>
|
|
<el-tab-pane label="Role">Role</el-tab-pane>
|
|
<el-tab-pane label="Task">Task</el-tab-pane>
|
|
</el-tabs>
|
|
```
|
|
|
|
:::
|
|
|
|
### Tabs Attributes
|
|
| Attribute | Description | Type | Accepted Values | Default |
|
|
|---------- |-------- |---------- |------------- |-------- |
|
|
| type | type of Tab | string | card/border-card | — |
|
|
| closable | whether Tab is closable | boolean | — | false |
|
|
| active-name | name of the selected tab | string | — | name of first tab |
|
|
|
|
### Tabs Events
|
|
| Event Name | Description | Parameters |
|
|
|---------- |-------- |---------- |
|
|
| tab-click | triggers when a tab is clicked | clicked tab |
|
|
| tab-remove | triggers when a tab is removed | removed tab |
|
|
|
|
### Tab-pane Attributes
|
|
| Attribute | Description | Type | Accepted Values | Default |
|
|
|---------- |-------- |---------- |------------- |-------- |
|
|
| label | title of the tab | string | — | — |
|
|
| label-content | render function for tab title | Function(h) | - | - |
|
|
| disabled | whether Tab is disabled | boolean | - | false |
|
|
| name | identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane | string | — | ordinal number of the tab-pane in the sequence, i.e. the first tab-pane is '1' |
|