## 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. By default the first tab is selected as active, and you can activate any tab by setting the `value` attribute.
```html
User
Config
Role
Task
```
:::
### Card Style
Tabs styled as cards.
:::demo Set `type` to `card` can get a card-styled tab.
```html
User
Config
Role
Task
```
:::
### Border card
Border card tabs.
:::demo Set `type` to `border-card`.
```html
User
Config
Role
Task
```
:::
### Tab position
You can use `tab-position` attribute to set the tab's position.
:::demo You can choose from four directions: `tabPosition="left|right|top|bottom"`
```html
top
right
bottom
left
User
Config
Role
Task
```
:::
### Custom Tab
You can use named slot to customize the tab label content.
:::demo
```html
Route
Route
Config
Role
Task
```
:::
### Add & close tab
Only card type Tabs support addable & closeable.
:::demo
```html
{{item.content}}
```
:::
### Customized trigger button of new tab
:::demo
```html
add tab
{{item.content}}
```
:::
### Tabs Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| type | type of Tab | string | card/border-card | — |
| closable | whether Tab is closable | boolean | — | false |
| addable | whether Tab is addable | boolean | — | false |
| editable | whether Tab is addable and closable | boolean | — | false |
| value | name of the selected tab | string | — | name of first tab |
| tab-position | position of tabs | string | top/right/bottom/left | top |
### Tabs Events
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
| tab-click | triggers when a tab is clicked | clicked tab |
| tab-remove | triggers when tab-remove button is clicked | name of the removed tab |
| tab-add | triggers when tab-add button is clicked | — |
| edit | triggers when tab-add button or tab-remove is clicked | (targetName, action) |
### Tab-pane Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| label | title of the tab | string | — | — |
| 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, e.g. the first tab-pane is '1' |
| closable | whether Tab is closable | boolean | — | false |