Tabulación

Divide colecciones de datos que están relacionados pero pertenecen a diferentes tipos.

Uso básico

Tabulación básica y concisa

Pestañas diseñadas como tarjetas.

Pestañas de tarjeta con bordes.

Es posible usar el atributo tab-position para establecer la posición de la tabulación.

Es posible usar slots con nombre para personalizar el contenido de la etiqueta de la pestaña.

Solo las pestañas de tipo tarjeta soportan adición y cierre.

Nombre	Descripción	Tipo	Valores Aceptados	Por defecto
model-value / v-model	valor enlazado, nombre de la pestaña seleccionada	string / number	—	nombre de la primer pestaña
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
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)	—	—

Nombre	Descripción	Parámetros
tab-click	se lanza cuando se hace clic a una pestaña	(pane: `TabsPaneContext`, ev: `Event`)
tab-change	se dispara cuando `activeName` cambia	(name: `TabPaneName`)
tab-remove	se lanza cuando se hace clic al botón tab-remove	(name: `TabPaneName`)
tab-add	se lanza cuando se hace clic al botón tab-add	—
edit	se lanza cuando los botones de tab-add y/o tab-remove son clickeados	(paneName: `TabPaneName \| undefined`, action: `'remove' \| 'add'`)

Nombre	Descripción	Subtags
-	personaliza el contenido por defecto	Tab-pane
addIcon 2.4.0 deprecated	customize add button icon	-
add-icon 2.5.4	customize add button icon	-

Nombre	Descripción	Tipo	Valores aceptados	Por defecto
label	título de la pestaña	string	—	—
disabled	si la Tabulación está deshabilitada	boolean	—	false
name	identificador correspondiente al value de la Tabulación, representando el alias del tab-pane	string / number	—	número ordinal del tab-pane en la secuencia, p.ej el primer tab-pane de pestañas es '0'
closable	si la Pestaña es cerrable	boolean	—	false
lazy	si Tab es renderizado con `lazy-load`	boolean	—	false