Saltar al contenido
Alea0.1
Pro
  1. Alea
  2. Componentes
  3. Navegación
  4. Tabs

Navegación

Tabs

Cambia entre vistas de lo mismo. Subrayado o píldoras, horizontal o vertical.

import { Tabs, TabList, Tab, TabPanel } from '@alea/ui';

Ejemplos

Tabs

El subrayado crece con el degradado de acento.

Generates a full color system as Figma variables.

Píldoras

El estilo segmentado, con íconos.

The live component.

Variantes

underline (por defecto), pills, enclosed (pestañas tipo tarjeta unidas a su panel) y soft (una píldora con tinte). El indicador se desliza hasta la pestaña seleccionada.

variant="underline": overview

variant="pills": overview

variant="enclosed": overview

variant="soft": overview

Vertical

Para páginas de ajustes.

Name and description.

Íconos, badges, tamaños y fitted

icon y badge en cada Tab; size sm, md o lg; fitted reparte el ancho por igual.

Cerrables, agregar y desbordamiento

onClose hace que una pestaña se pueda cerrar (Suprimir o Retroceso con el teclado); extra pone un botón de agregar junto a la fila; cuando las pestañas no caben, la fila tiene scroll con flechas y degradados.

Editing index.tsx

Reordenables

onReorder permite arrastrar las pestañas a un nuevo orden, o mover la pestaña con foco con Alt + Mayús + flechas; se anuncia la nueva posición.

Inbox

Configuraciones

Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.

fitted: false
fitted: true
start
end
center
sm
md
lg
soft
underline
pills
enclosed
  1. Fittedfitted
  2. Justifyjustify
  3. Sizesize
  4. Variantvariant

Estados

Cada estado de interacción, forzado para compararlos, en ambos temas.

Oscuro

Habilitado
Hover
Foco
Presionado
Disabled

Claro

Habilitado
Hover
Foco
Presionado
Disabled

Anatomía

Las partes del componente y la clase que da estilo a cada una.

Tokens

Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.

Color

  • --alea-accent…
  • --alea-accent-subtle…
  • --alea-border…
  • --alea-chip-text…
  • --alea-surface…
  • --alea-surface-deep…
  • --alea-text…

Space

  • --alea-space-2…
  • --alea-space-4…

Radius

  • --alea-radius-full…
  • --alea-radius-md…
  • --alea-radius-sm…

Type

  • --alea-font-size-base…
  • --alea-font-size-sm…

Props

Tabs props

Cambia entre vistas: cuatro estilos, tres tamaños, íconos, badges, pestañas cerrables, contenido extra y flechas de scroll cuando las pestañas no caben. Las flechas se mueven entre pestañas; Inicio y Fin saltan.

PropTipoPor defectoDescripción
fittedboolean-Las pestañas reparten todo el ancho por igual.
justify"start" | "end" | "center"-Dónde van las pestañas en la fila cuando no son fitted: start (por defecto), center o end.
size"sm" | "md" | "lg"-sm (pestañas de 32 px), md (40 px, por defecto) o lg (48 px).
variant"soft" | "underline" | "pills" | "enclosed"'underline'underline (por defecto), pills (el estilo segmentado), enclosed (pestañas tipo tarjeta unidas al panel) o soft (una píldora con tinte).

TabList props

La fila de pestañas. Necesita un aria-label cuando no hay un título visible para ella. Muestra flechas de desplazamiento cuando las pestañas no caben, y se puede reordenar.

PropTipoPor defectoDescripción
extraReactNode-Contenido al final de la fila, fuera de las pestañas: un botón de agregar, un filtro.
onReorder((key: string, toIndex: number) => void)-Hace las pestañas reordenables: arrástralas, o usa Alt + Mayús + flechas sobre la pestaña con foco. Se llama con el id de la pestaña movida y su nuevo índice; actualiza tu orden.

Tab props

Una pestaña; su id coincide con un TabPanel.

PropTipoPor defectoDescripción
badgeReactNode-Una cantidad o etiqueta corta después de la etiqueta.
iconReactNode-Un ícono antes de la etiqueta.
onClose(() => void)-Hace que la pestaña se pueda cerrar: Suprimir o Retroceso la cierran, y aparece una × para el puntero.

TabPanel props

El contenido de la pestaña con el mismo id. Pasa shouldForceMount para mantenerlo montado mientras está oculto.

PropTipoPor defectoDescripción
aria-labelstring-Define un texto que etiqueta al elemento actual. (heredada)
childrenChildrenOrFunction<DisclosureGroupRenderProps>-Los hijos del componente. Puede ser una función para cambiar los hijos según el estado del componente. (heredada)
classNameClassNameOrFunction<TabsRenderProps>-El [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) CSS del elemento. Puede ser una función para calcular la clase según el estado del componente. (heredada)
idKey-El id único de la pestaña. (heredada)
styleStyleOrFunction<DisclosureGroupRenderProps>-El [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) en línea del elemento. Puede ser una función para calcular el estilo según el estado del componente. (heredada)

Especificaciones

Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.

Tabs

Variantes
justifystartendcenter
sizesmmdlg
variantsoftunderlinepillsenclosed
Estados
Selected
Motion
glide
Oscuro y claro
Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos
.alea-tabs
Atributos data
data-orientation=verticaldata-variant=underlinedata-variant=pillsdata-size=smdata-size=lgdata-fitteddata-justify=centerdata-justify=enddata-variant=encloseddata-variant=soft

TabList

Estados
Dragging
Oscuro y claro
Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos
.alea-tab-list.alea-tab-bar.alea-tab-scroll.alea-tab-extra
Atributos data
data-orientation=verticaldata-overflow-enddata-overflow-startdata-side=startdata-side=enddata-reorderabledata-variant=underlinedata-variant=pillsdata-fitteddata-justify=centerdata-justify=enddata-variant=enclosed

Tab

Estados
DraggingSelectedHover (CSS)HoverDisabled
Motion
glide
Oscuro y claro
Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos
.alea-tab.alea-tab-icon.alea-tab-label.alea-tab-badge.alea-tab-close.alea-sel-indicator
Atributos data
data-reorderabledata-variant=underlinedata-variant=pillsdata-size=smdata-size=lgdata-fitteddata-variant=encloseddata-variant=soft

TabPanel

Estados
Entering
Oscuro y claro
Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos
.alea-tab-panel
Atributos data
data-variant=enclosed

Accesibilidad

  • La lista de pestañas, las pestañas y los paneles se conectan con ARIA; la pestaña elegida es la única parada de Tab.

Teclado

TeclaAcción
FlechasSe mueven entre pestañas
Inicio / FinPrimera o última pestaña
TabEntra al panel

Qué hacer y qué evitar

Hacer

  • Mantén cortos los nombres de las pestañas.

Evitar

  • No uses pestañas para los pasos de un proceso.
SegmentedControl
Probado con axe, teclado y roles de lector de pantalla