## 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 ``` ::: ### Card Style Tabs styled as cards. :::demo Set `type` to `card` can get a card-styled tab. ```html ``` ::: ### 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 ``` ::: ### Border card Border card tabs. :::demo Set `type` to `border-card`. ```html

User

Config

Role

Task