Tabs
La suite Tabs de Nuvex UI combina ETabGroup y ETab para organizar vistas relacionadas mediante una seleccion activa. Componla con EWindow y EWindowItem cuando cada tab controle un panel de contenido con estado sincronizado y relaciones accesibles.
Uso
Configura el valor activo y las principales props del grupo en el playground. Cada ETab tiene un valor estable, mientras el v-model compartido identifica la seleccion actual.
Tab seleccionado: overview
Paneles de contenido
Conecta los tabs con paneles EWindowItem mediante los mismos valores del modelo. Asigna el mismo name a ETabGroup y EWindow para generar IDs coincidentes entre tabs y paneles.
Revisa el resumen del workspace y la salud reciente del proyecto.
Orientacion
Los tabs son horizontales por defecto. Activa vertical para navegacion lateral; el indicador gira y el movimiento por teclado cambia de Izquierda y Derecha a Arriba y Abajo.
Fundamentos
Fundamentos de color, tipografia, espaciado y superficies.
Estados e interaccion
El modelo controla los estados activo e inactivo y puede actualizarse desde los tabs o desde acciones de la aplicacion. Cada tab hereda props de estado de Button como disabled.
Slots y composicion
El slot default del grupo contiene la secuencia de tabs y el slot default de cada tab contiene su etiqueta. Los tabs tambien heredan el soporte de iconos de Button.
Accesibilidad y teclado
Los tabs exponen semantica tablist, tab y tabpanel con foco administrado. Los grupos horizontales soportan Izquierda y Derecha; los verticales soportan Arriba y Abajo. Home y End mueven al primer y ultimo tab.
Enfoca un tab y usa las flechas, Home o End.
Revisa el resumen del workspace y la salud reciente del proyecto.
Referencia API
Consulta las props publicas de ETabGroup y las props principales de ETab. Los eventos y slots se resumen despues de las tablas.
Props de ETabGroup
| Propiedad | Tipo | Por defecto |
|---|---|---|
| modelValue | string | number | undefined |
Valor del tab activo sincronizado mediante update:modelValue. | ||
| color | string | undefined |
Define el color del tab activo y del indicador. | ||
| inactiveColor | string | undefined |
Define el color heredado por los tabs inactivos. | ||
| track | boolean | false |
Renderiza una linea base debajo del indicador activo. | ||
| vertical | boolean | false |
Usa un layout vertical y cambia la navegacion por teclado al eje vertical. | ||
| grow | boolean | false |
Distribuye el espacio disponible por igual entre los tabs. | ||
| tabAlign | "start" | "center" | "end" | "center" |
Alinea los tabs sobre el eje principal del grupo. | ||
| name | string | undefined |
Prefija los IDs que establecen la relacion accesible entre tabs y paneles. | ||
Props de ETab
| Propiedad | Tipo | Por defecto |
|---|---|---|
| value | string | number | requerida |
Identidad unica comparada con el modelo del grupo padre. | ||
| icon | string | IconPath | IconPath[] | undefined |
Renderiza un icono en el boton del tab. | ||
| disabled | boolean | false |
Deshabilita la activacion por puntero y teclado para este tab. | ||
| color | string | heredado |
Sobrescribe el color del grupo para este tab cuando esta activo. | ||
| to | RouteLocationRaw | undefined |
Propaga un destino de navegacion al contrato heredado de Button. | ||
Eventos y slots
ETabGroup emite update:modelValue y expone el slot default. ETab emite click y expone los slots default y activator. Un activador personalizado debe conservar el rol tab, los atributos ARIA y el comportamiento de teclado.