Pestañas

Código

Copiar el marcado

<nav class="luz-tabs" aria-label="Project">
  <a class="luz-tab" href="#project-summary">Summary</a>
  <a class="luz-tab" href="#project-settings">Settings</a>
</nav>
<div class="luz-tabpanel" id="project-summary">…</div>
<div class="luz-tabpanel" id="project-settings">…</div>

<nav class="luz-tabs luz-tabs--pill" aria-label="Project">
  <a class="luz-tab" href="#project-summary">
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">…</svg>Summary
  </a>
  <a class="luz-tab" href="#project-settings">
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">…</svg>Settings
  </a>
</nav>

import { initTabs } from "@luz-ds/core/tabs";
initTabs();

Variantes y opciones

Una clase cambia el aspecto:

La primera pestaña que se abre es la primera que cumpla una de estas condiciones:

Cómo funciona

Fila de enlaces internos a los paneles, con estilos de components/tabs.css y mejorada por tabs.js.

• initTabs() añade el patrón de pestañas de ARIA: role="tablist", "tab" y "tabpanel", aria-selected, aria-controls, aria-labelledby y un tabindex itinerante. Oculta los paneles inactivos. luz.js lo ejecuta.
• Un enlace a un elemento dentro de un panel oculto abre su pestaña al cargar, al producirse hashchange y al hacer clic.
• Los paneles inactivos usan hidden="until-found" cuando el navegador lo admite, de modo que la búsqueda en la página puede encontrarlos y abrir su pestaña.
• activateTab(tab) selecciona una pestaña desde tu propio script.

Sin JavaScript

Las pestañas son una fila de enlaces y todos los paneles se muestran apilados en orden. Cada enlace salta a su panel.

Asigna un encabezado a cada panel para que la página apilada siga siendo fácil de leer.

En el aspecto de píldora, la pastilla se dibuja con aria-selected="true", que pone el script: sin JavaScript ninguna pestaña tiene pastilla.

Teclado y ARIA

Tab entra en la fila de pestañas y lleva a la seleccionada; otra pulsación de Tab sale de la fila hacia el panel.

• Las flechas izquierda y derecha (o arriba y abajo) mueven el foco a la pestaña siguiente y la seleccionan; Home y End llevan a la primera y a la última.
• Espacio o Enter selecciona la pestaña enfocada.
• En texto de derecha a izquierda, las flechas izquierda y derecha siguen la dirección de lectura.
• Asigna un nombre a la fila de pestañas con aria-label; lo conserva cuando se convierte en una lista de pestañas.

El contraste y el foco se explican en la pestaña Diseño.

Diseño

Cuándo usarlo

Usa pestañas para cambiar entre paneles del mismo nivel que no sea necesario ver a la vez, como el resumen, los ajustes y los registros de un servicio.

Cuándo no usarlo

No uses pestañas para cambiar de página ni para ocultar contenido que se necesite ver de una vez.

• Para cambiar de página, usa una barra lateral o enlaces en la cabecera.
• Para pasos que deban seguirse en orden, usa páginas separadas.
• Más de cinco o seis pestañas no caben en un móvil: usa secciones con encabezados.

Qué hacer y qué no

Cómo escribir el contenido

Pon a cada pestaña el nombre de su panel, con una o dos palabras.

• Usa estilo oración y evita los verbos: «Resumen», «Ajustes».
• Usa el mismo nombre para el encabezado del panel.

Contraste y foco

Las pestañas usan texto secundario; la actual usa texto de marca y un subrayado de marca. En el aspecto de píldora, además, va sobre una pastilla.

Calculado a partir de los valores de los tokens de cada modo y redondeado hacia abajo. El mínimo necesario corresponde al nivel AA de WCAG 2.2: 4,5:1 para el texto y 3:1 para los anillos de foco, los bordes y los iconos.

• Foco: contorno de 2 px --luz-focus-ring dibujado dentro de la pestaña, para que la fila desplazable nunca lo recorte.
• No solo el color: la pestaña actual tiene un subrayado de 2 px; la línea de la fila bajo las demás usa --luz-divider. El aspecto de píldora conserva el subrayado y el peso en la pastilla.
• Iconos: marca cada icono con aria-hidden="true" para que el nombre de la pestaña sea su texto; por debajo de 640 px el icono se oculta, así que nunca debe llevar solo el significado.

Tokens que usa

Los 15 tokens que lee components/tabs.css, agrupados por familia. Cada familia enlaza a su página, donde aparecen los valores de cada modo. En Figma son variables con los mismos nombres: consulta Tokens en Figma.

Color

--luz-brand-primary, --luz-divider, --luz-focus-ring, --luz-surface, --luz-text-primary, --luz-text-secondary

Spacing and sizing

--luz-space-2xs, --luz-space-md, --luz-space-sm, --luz-space-xs

Typography

--luz-font-sans, --luz-text-md, --luz-text-sm

Radius

--luz-radius-md

Motion

--luz-duration-fast

El teclado y ARIA se explican en la pestaña Código.