Todos los componentes (204)

Pestañas

Navegación · Tabs · .amset-tabs

Qué es y cuándo usarlo

Varias vistas del mismo objeto en el mismo sitio, una a la vez: la descripción, las medidas y las opiniones de un producto; los datos, las facturas y los avisos de un cliente.

Cuándo usarlo

Cuando el contenido se reparte en tres a seis apartados del mismo tamaño y quien lo mira solo necesita uno cada vez.
counter en una pestaña para decir cuántas cosas hay dentro sin tener que abrirla («Facturas 12»).
disabled en una pestaña (o su clave en disabledKeys) para un apartado que existe pero no se puede ver (sin permisos): se ve apagado y el teclado se lo salta.
variant="pill" cuando van dentro de una tarjeta o de una barra, donde una raya más compite con los bordes; orientation="vertical" para ponerlas en columna al lado del panel.
keyboardActivation="manual" cuando abrir una pestaña cuesta (una consulta al servidor): las flechas solo mueven el foco y se elige con Intro o Espacio.

Cuándo no

Si cada apartado es una página con su propia dirección: eso es navegación, SideNav o TopBar.
Para cambiar cómo se ve la misma lista (lista o rejilla, día o semana): SegmentedGroup.
Una pestaña sin content no tiene panel: es un filtro o un modo de la misma pantalla, que pinta quien monta el componente. Sigue siendo una pestaña (flechas, foco, elegida) pero no lleva aria-controls.
Si hace falta ver varios apartados a la vez o compararlos: Accordion con allowsMultipleExpanded.

Teclado: Tab llega a la pestaña activa; las flechas izquierda y derecha (arriba y abajo en columna) cambian de pestaña, se saltan las deshabilitadas y dan la vuelta al llegar al final. Inicio y Fin van a la primera y a la última. En un idioma que se escribe de derecha a izquierda las flechas de la fila se invierten. Otro Tab entra en el panel. Si las pestañas no caben en el ancho, la tira se desplaza de lado sin barra: la rueda del ratón la mueve, y el foco lleva a la vista la pestaña a la que llega.

Accesibilidad: es un tablist con nombre (label) y cada panel está enlazado a su pestaña con aria-labelledby. Solo se monta el panel de la pestaña activa. Con line la activa se marca con color, subrayado y peso; con pill, rellena: nunca solo con color.

Aspecto fino: variables CSS --amset-tabs-*: -font, -gap, -list-gap, -padding-block, -padding-inline, -radius. El tamaño mueve el relleno y el cuerpo de letra; la variante, como se marca la elegida.

Cómo se ve

Resumen

Envío2

Factura

Tres artículos, 148,20 €.

<Tabs
  label="Detalle del pedido"
  tabs={[
    { key: 'resumen', label: 'Resumen', content: <Resumen /> },
    { key: 'envio', label: 'Envio', counter: 2, content: <Envio /> },
    { key: 'factura', label: 'Factura', content: <Factura /> },
  ]}
/>

Props

Se importa con import { Tabs } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Lo que se anuncia al llegar al grupo de pestañas.
`tabs`obligatoria	`readonly Tab[]`	—
`className`	`string`	—
`defaultSelectedKey`	`string \| number`	—
`disabled`	`boolean`	El grupo entero fuera de juego: se sigue viendo lo elegido, pero no se cambia.
`disabledKeys`	`Iterable<string \| number>`	—
`keyboardActivation`	`"manual" \| "automatic"`	`automatic` (por defecto) elige al mover la flecha; `manual` solo mueve el foco y se elige con Intro o con Espacio. Manual es para cuando abrir una pestaña cuesta: una consulta al servidor por cada flecha no se hace.
`onSelectionChange`	`(key: string \| number) => void`	—
`orientation`	`"horizontal" \| "vertical"`	En fila (por defecto) o en columna, al lado del panel.
`selectedKey`	`string \| number`	Cual esta elegida. Si se pasa, el estado lo lleva quien use el componente.
`size`	`"sm" \| "md" \| "lg"`	El cuerpo de letra y el relleno de cada pestaña.
`variant`	`TabsVariant`	Como se marca la elegida: `line` la subraya (por defecto) y `pill` la rellena. La de pastilla es para cuando las pestañas van dentro de una tarjeta o de una barra, donde una raya mas compite con los bordes.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-tabs-gap`	`var(--amset-space-4)`
`--amset-tabs-list-gap`	`var(--amset-space-1)`
`--amset-tabs-padding-block`	`var(--amset-space-2)`
`--amset-tabs-padding-inline`	`var(--amset-space-3)`
`--amset-tabs-font`	`var(--amset-text-base)`
`--amset-tabs-radius`	`var(--amset-radius)`

Cómo se cambia

.amset-tabs {
  --amset-tabs-gap: ...;
  --amset-tabs-list-gap: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: