# Tabs (paneles relacionados)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/component-tabs.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Componentes · Interacción

Alterna vistas relacionadas dentro del mismo contexto manteniendo navegación por teclado y estado seleccionado.

v2.0

⇥
## Teclado incluido
Flechas, Home y End cambian la pestaña activa.

1
## Un panel visible
El estado seleccionado sincroniza trigger y contenido.

↔
## Desplazamiento seguro
La lista permite desplazamiento horizontal cuando falta espacio.

i
## Contenido relacionado
Tabs funciona cuando los paneles son alternativas del mismo contexto. Para pasos secuenciales utiliza otro patrón.

Código + resultado

## Ejemplo aplicado de Tabs
El código mostrado corresponde exactamente al componente renderizado en el panel de resultado.

HTML

```html
<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>
```

Resultado aplicado   Tabs · panel seleccionado

Componente real

Configura la información principal del proyecto.
Conecta únicamente los módulos que utilices.
La navegación admite teclado y foco visible.

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

01
### Mismo contexto
Agrupa sólo contenidos equivalentes o estrechamente relacionados.

02
### Etiqueta breve
Evita nombres largos que saturen la lista.

03
### IDs únicos
Conecta cada tab y panel con aria-controls y aria-labelledby.

04
### Estado inicial
Deja una sola pestaña seleccionada al cargar.