Estructura y Layout

Tab

Componente de navegacion por pestanas con variantes underline, pills y vetches para organizar secciones de contenido.

Tests

43%

Uso

STab es un componente compuesto de navegacion por pestanas. Usa STabItem dentro de STab para definir cada pestana. La pestana activa se controla mediante v-model, que se vincula a la prop path de cada STabItem.

Variantes

La prop variant cambia el estilo visual de la navegacion por pestanas. Las variantes disponibles son underline (indicador de borde inferior), pills (fondo redondeado) y vetches (contenido redondeado con borde).

Props de STab

Prop	Tipo	Por defecto	Descripcion
`modelValue`	`string`	-	La ruta de la pestana activa. Requerido. Usar con `v-model`.
`variant`	`'underline' \| 'pills' \| 'vetches'`	`'underline'`	Estilo visual de la navegacion por pestanas.
`full`	`boolean`	`false`	Hace que las pestanas se expandan para llenar todo el ancho.
`dropdownResponsive`	`boolean`	`false`	Habilita el comportamiento responsivo de dropdown para pestanas desbordadas.
`longestCommonPrefix`	`boolean`	`false`	Usa la coincidencia del prefijo comun mas largo para la deteccion de la pestana activa.
`class`	`string`	-	Clases CSS adicionales para el elemento raiz.

Props de STabItem

Prop	Tipo	Por defecto	Descripcion
`path`	`string`	-	Identificador unico de la pestana. Se usa para coincidir con el `modelValue`.
`as`	`string \| Component`	`'button'`	El elemento HTML o componente Vue con el que se renderiza la pestana.
`icon`	`FunctionalComponent`	-	Componente de icono mostrado antes de la etiqueta de la pestana.
`active`	`boolean`	-	Establece manualmente la pestana como activa, anulando la coincidencia por ruta.
`regex`	`RegExp`	-	Expresion regular para la coincidencia personalizada del estado activo contra el valor del modelo.
`dropdown`	`boolean`	`false`	Renderiza la pestana como un disparador de dropdown. Usa el slot `items` para el contenido del dropdown.
`class`	`string`	-	Clases CSS adicionales para el elemento de la pestana.

Props de STabDropdownItem

Prop	Tipo	Por defecto	Descripcion
`path`	`string`	-	Identificador unico del elemento del dropdown. Se usa para coincidir con el `modelValue`.
`regex`	`RegExp`	-	Expresion regular para la coincidencia personalizada del estado activo.
`as`	`string \| Component`	-	El elemento HTML o componente Vue con el que se renderiza.

Eventos

Evento	Payload	Descripcion
`update:modelValue`	`string`	Se emite cuando la pestana activa cambia.

Slots

STab

Nombre	Descripcion
`default`	Elementos de pestana (componentes `STabItem`).

STabItem

Nombre	Descripcion
`default`	Contenido de la etiqueta de la pestana.
`items`	Contenido del menu dropdown cuando `dropdown` es `true`.

Editar esta páginaoReportar un problema

Sidebar

Componente de barra lateral de navegacion con grupos colapsables, separadores y gestion de estado activo.

Table

Componente de tabla composable con sub-componentes para encabezados, filas y celdas. Soporta generacion automatica y modo sin bordes.