## Tabulación
Divide colecciones de datos que están relacionados pero pertenecen a diferentes tipos.
### Uso básico
Tabulación básica y concisa
:::demo Tabulación provee funcionalidad de tarjeta selectiva. Por defecto, la primer pestaña es seleccionada como activa, y es posible activar cualquier pestaña estableciendo el atributo de `value`.
```html
User
Config
Role
Task
```
:::
### Estilo de Tarjeta
Pestañas diseñadas como tarjetas.
:::demo Establecer `type` a `card` para obtener una pestaña diseñada como tarjeta.
```html
User
Config
Role
Task
```
:::
### Tarjeta con Bordes
Pestañas de tarjeta con bordes.
:::demo Establecer `type` a `border-card`.
```html
User
Config
Role
Task
```
:::
### Posición de tabulación
Es posible usar el atributo `tab-position` para establecer la posición de la tabulación.
:::demo Es posible escoger entre cuatro direcciones: `tabPosition="left|right|top|bottom"`
```html
top
right
bottom
left
User
Config
Role
Task
```
:::
### Pestaña Personalizada
Es posible usar slots con nombre para personalizar el contenido de la etiqueta de la pestaña.
:::demo
```html
Route
Route
Config
Role
Task
```
:::
### Agregar y cerrar pestaña
Solo las pestañas de tipo tarjeta soportan adición y cierre.
:::demo
```html
{{item.content}}
```
:::
### Botón disparador personalizado de la nueva pestaña
:::demo
```html
add tab
{{item.content}}
```
:::
### Atributos de Pestañas
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ------------ | ------------------------------------ | ------- | --------------------- | --------------------------- |
| type | tipo de Pestaña | string | card/border-card | — |
| closable | si la Pestaña es cerrable | boolean | — | false |
| addable | si la Pestaña es añadible | boolean | — | false |
| editable | si la Pestaña es añadible y cerrable | boolean | — | false |
| value | nombre de la pestaña seleccionada | string | — | nombre de la primer pestaña |
| tab-position | posición de tabulación | string | top/right/bottom/left | top |
| stretch | si el ancho del tab se ajusta automáticamente a su contenedor | boolean | - | false |
| before-leave | función `hook` antes de cambiar de pestaña. Si se devuelve `false` o se devuelve una `Promise` y luego se rechaza, se evitará el cambio. | Function(activeName, oldActiveName) | — | — |
### Eventos de Pestañas
| Nombre de Evento | Descripción | Parámetros |
| ---------------- | ---------------------------------------- | ----------------------------- |
| tab-click | se lanza cuando se hace click a una pestaña | pestaña clickeada |
| tab-remove | se lanza cuando se hace click al botón tab-remove | nombre de la pestaña removida |
| tab-add | se lanza cuando se hace click al botón tab-add | — |
| edit | se lanza cuando los botones de tab-add y/o tab-remove son clickeados | (targetName, action) |
### Attributos del Tab-pane
| Atributo | Descripción | Tipo | Valores Aceptados | Default |
| -------- | ------------------------------------------------------------ | ------- | ----------------- | ------------------------------------------------------------ |
| label | título de la pestaña | string | — | — |
| disabled | si la Tabulación está deshabilitada | boolean | — | false |
| name | identificador correspondiente al activeName de la Tabulación, representando el alias del tab-pane | string | — | número ordinal del tab-pane en la secuencia, p.ej el primer tab-pane de pestañas es '1' |
| closable | si el Tab es cerrable | boolean | — | false |
| lazy | si Tab es renderizado con `lazy-load` | boolean | — | false |