'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Navegación
Accordion
Secciones que se abren y cierran con un cambio de altura suave: cuatro estilos (separated, joined, ghost, filled), tres tamaños, un indicador de flecha o más a cualquier lado, y un ícono, subtítulo y contenido extra en cada encabezado. Una o varias abiertas a la vez.
import { Accordion, AccordionItem } from '@alea/ui';
Ejemplos
Preguntas frecuentes
Tarjetas separadas, una abierta a la vez.
Unidas, varias abiertas
Una tarjeta con divisores; allowsMultipleExpanded mantiene varias abiertas.
Variantes
tarjetas separadas (por defecto), joined (una sola tarjeta), ghost (solo líneas, para preguntas frecuentes largas) y filled (secciones con tinte).
Íconos, subtítulos y extra
Cada encabezado puede llevar un ícono, un subtítulo y contenido extra al final (un badge o un contador). El indicador puede ser un más que se convierte en una cruz, al inicio o al final.
Tamaños
sm (encabezados de 44 px) para paneles de ajustes, md (56 px) por defecto, lg (64 px) para landings y preguntas frecuentes.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Indicator
indicator - Indicator Position
indicatorPosition - Size
size - Variant
variant
Estados
Cada estado de interacción, forzado para compararlos, en ambos temas.
Oscuro
Claro
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-border…--alea-surface…--alea-surface-deep…--alea-surface-raised…
Space
--alea-space-2…--alea-space-4…--alea-space-6…
Radius
--alea-radius-lg…
Type
--alea-font-size-base…--alea-font-size-lg…--alea-font-size-md…--alea-font-size-sm…
Shadow
--alea-shadow-card…
Props
Accordion props
Una lista de secciones que se expanden y contraen: cuatro estilos, tres tamaños, el indicador a cualquier lado, íconos, subtítulos y contenido extra en cada encabezado. allowsMultipleExpanded mantiene varias abiertas.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
indicator | "chevron" | "plus" | - | chevron (por defecto, se da vuelta) o plus (se convierte en una cruz). |
indicatorPosition | "start" | "end" | - | Dónde va el indicador: end (por defecto) o start. |
size | "sm" | "md" | "lg" | - | sm (encabezados de 44 px), md (56 px, por defecto) o lg (64 px). |
variant | "separated" | "joined" | "ghost" | "filled" | 'separated' | tarjetas separadas (por defecto), joined (una tarjeta con divisores), ghost (sin tarjeta, solo divisores) o filled (secciones con tinte). |
AccordionItem props
Una sección expandible. También funciona sola (un disclosure único).
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
titleobligatoria | ReactNode | - | El encabezado siempre visible. |
extra | ReactNode | - | Contenido al final del encabezado, antes del indicador: un badge, un contador, un estado. Que no sea interactivo: todo el encabezado es un botón. |
headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Nivel de título del botón de encabezado. Por defecto 3. |
icon | ReactNode | - | Un ícono antes del título. |
subtitle | ReactNode | - | Una segunda línea apagada bajo el título. |
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.
Accordion
- Variantes
indicatorchevronplusindicatorPositionstartendsizesmmdlgvariantseparatedjoinedghostfilled- Estados
- Expanded
- 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-accordion- Atributos data
data-variant=joineddata-indicator=plusdata-indicator-position=startdata-size=smdata-size=lgdata-variant=ghostdata-variant=filled
AccordionItem
- Estados
- HoverExpandedDisabled
- Motion
- expandmorphtint
- 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-accordion-item.alea-accordion-heading.alea-accordion-trigger.alea-accordion-icon.alea-accordion-titles.alea-accordion-title.alea-accordion-subtitle.alea-accordion-extra.alea-accordion-indicator.alea-accordion-chevron.alea-accordion-plus.alea-accordion-panel- Atributos data
data-variant=joineddata-indicator=plusdata-indicator-position=startdata-size=smdata-size=lgdata-variant=ghostdata-variant=filled
Accesibilidad
- Cada encabezado es un título con un botón que dice si está abierto.
Teclado
| Tecla | Acción |
|---|---|
| Enter o Espacio | Abre o cierra |
Qué hacer y qué evitar
Hacer
- Usa preguntas como títulos en unas preguntas frecuentes.
Evitar
- No escondas lo que la mayoría necesita.