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).

Iconos

Usa la prop icon en STabItem para mostrar un icono antes de la etiqueta de la pestaña. Los iconos funcionan en todas las variantes.

Ancho Completo

La prop full hace que las pestañas se expandan para llenar todo el ancho disponible.

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.