Componentes · Interacción
Tabs (paneles relacionados)
Alterna vistas relacionadas dentro del mismo contexto manteniendo navegación por teclado y estado seleccionado.
Teclado incluido
Flechas, Home y End cambian la pestaña activa.
Un panel visible
El estado seleccionado sincroniza trigger y contenido.
Desplazamiento seguro
La lista permite desplazamiento horizontal cuando falta espacio.
Código + resultado
Ejemplo aplicado de Tabs
El código mostrado corresponde exactamente al componente renderizado en el panel de resultado.
<div class="q-tabs rounded-12" data-qy-tabs>
<div class="q-tabs__list" role="tablist">
<button class="q-tab" id="component-tab-general" type="button" role="tab" aria-selected="true" aria-controls="component-panel-general" data-qy-tab>
General
</button>
<button class="q-tab" id="component-tab-code" type="button" role="tab" aria-selected="false" aria-controls="component-panel-code" data-qy-tab>
Código
</button>
<button class="q-tab" id="component-tab-access" type="button" role="tab" aria-selected="false" aria-controls="component-panel-access" data-qy-tab>
Accesibilidad
</button>
</div>
<div class="q-tab-panel" id="component-panel-general" role="tabpanel" aria-labelledby="component-tab-general" data-qy-panel>
Configura la información principal del proyecto.
</div>
<div class="q-tab-panel" id="component-panel-code" role="tabpanel" aria-labelledby="component-tab-code" data-qy-panel hidden>
Conecta únicamente los módulos que utilices.
</div>
<div class="q-tab-panel" id="component-panel-access" role="tabpanel" aria-labelledby="component-tab-access" data-qy-panel hidden>
La navegación admite teclado y foco visible.
</div>
</div>Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.
Referencia
Clases disponibles
La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive.
| Clase o atributo | Función | Uso recomendado |
|---|---|---|
.q-tabs | Raíz | Inicializa el conjunto. |
.q-tabs__list | Lista | Contenedor con role tablist. |
.q-tab | Activador | Selecciona un panel. |
.q-tab-panel | Panel | Contenido asociado a una pestaña. |
.bc-{token} | Color del estado activo | Sincroniza el texto y la línea seleccionada con tokens como primary, success, warning o danger. |
.rounded-12 | Radio opcional | Redondea el módulo completo mediante una utilidad independiente. |
data-qy-tabs | Hook JS | Inicializa el conjunto de pestañas. |
data-qy-tab | Hook JS | Identifica cada activador. |
data-qy-panel | Hook JS | Identifica cada panel. |
aria-selected / aria-controls | Estado accesible | Relaciona activadores y paneles. |
Recomendaciones
Buenas prácticas de Tabs
Mismo contexto
Agrupa sólo contenidos equivalentes o estrechamente relacionados.
Etiqueta breve
Evita nombres largos que saturen la lista.
IDs únicos
Conecta cada tab y panel con aria-controls y aria-labelledby.
Estado inicial
Deja una sola pestaña seleccionada al cargar.