## 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
```
:::
### Closable
Closable tabs.
:::demo You can set the closable attribute in el-tabs to make all tabs closable. Also, closable can be set in a tab panel to make that specific tab closable.
```html
User
Config
Role
Task
```
:::
### Border card
Border card tabs.
:::demo Set `type` to `border-card`.
```html
User
Config
Role
Task
```
:::
### Custom Tab
You can use `label-content` property to customize the tab
:::demo `label-content` is a render function,which return the vnode of the tab.
```html
Route
Config
Role
Task
```
:::
### 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(deprecated) | name of the selected tab | string | — | name of first tab |
| value | 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, tab:vueInstance) | - | - |
| 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' |
| closable | whether Tab is closable | boolean | — | false |