31/Interacción y estado

Tabs

Pestañas con navegación por flechas, Home y End. Dos estilos: línea y pastillas.

Línea

Datos generales del cliente.

Doce facturas emitidas este año.

Sin notas todavía.

HTML

<div class="cb-tabs" data-cb-tabs>
  <div class="cb-tabs__list" aria-label="Detalle del cliente">
    <button class="cb-tabs__tab" type="button">Resumen</button>
    <button class="cb-tabs__tab" type="button">Facturas<span class="cb-tabs__count">12</span></button>
    <button class="cb-tabs__tab" type="button">Notas</button>
    <button class="cb-tabs__tab" type="button" disabled>Archivo</button>
  </div>
  <div class="cb-tabs__panel"><p class="text-cb-muted">Datos generales del cliente.</p></div>
  <div class="cb-tabs__panel"><p class="text-cb-muted">Doce facturas emitidas este año.</p></div>
  <div class="cb-tabs__panel"><p class="text-cb-muted">Sin notas todavía.</p></div>
  <div class="cb-tabs__panel"></div>
</div>

Pastillas

Ventas de la semana.

Ventas del mes.

Ventas del año.

HTML

<div class="cb-tabs cb-tabs--pills" data-cb-tabs>
  <div class="cb-tabs__list" aria-label="Periodo">
    <button class="cb-tabs__tab" type="button">Semana</button>
    <button class="cb-tabs__tab" type="button" aria-selected="true">Mes</button>
    <button class="cb-tabs__tab" type="button">Año</button>
  </div>
  <div class="cb-tabs__panel"><p class="text-cb-muted">Ventas de la semana.</p></div>
  <div class="cb-tabs__panel"><p class="text-cb-muted">Ventas del mes.</p></div>
  <div class="cb-tabs__panel"><p class="text-cb-muted">Ventas del año.</p></div>
</div>

Clases y modificadores

Clase	Descripción
`.cb-tabs`	Contenedor. `--pills` cambia al estilo de pastillas.
`.cb-tabs__list`	Fila de pestañas con scroll horizontal si no caben.
`.cb-tabs__tab`	Pestaña; `aria-selected="true"` la marca.
`.cb-tabs__count`	Contador dentro de la pestaña.
`.cb-tabs__panel`	Panel; se empareja con la pestaña por orden.

Atributos data-cb-*

Atributo	Descripción
`data-cb-tabs`	Activa el componente.
`data-cb-tabs-manual`	Las flechas solo mueven el foco; Enter o Espacio activan.

JavaScript

Evento	Cuándo se dispara
`cb:change`	Al cambiar de pestaña (`detail.index`, `detail.tab`, `detail.panel`).

document.querySelector('[data-cb-tabs]').cbTabs.select(2);

Accesibilidad

El JS agrega role="tablist|tab|tabpanel", aria-controls y aria-labelledby.
Solo la pestaña activa está en el orden de tabulación (roving tabindex).
Las pestañas deshabilitadas se saltan al navegar con flechas.