'/%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
Collapsible
Una sección que se abre y se cierra, más liviana que un acordeón: opciones avanzadas, detalles, una lista larga.
import { Collapsible } from '@alea/ui';
Ejemplos
Opciones avanzadas
Más liviano que un acordeón: un disparador y su panel.
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-accent-strong…--alea-text…--alea-text-muted…
Radius
--alea-radius-xs…
Type
--alea-font-family-body…--alea-font-leading-relaxed…--alea-font-size-md…--alea-font-weight-medium…
Motion
--alea-motion-duration-base…--alea-motion-duration-slow…--alea-motion-ease-emphasized…--alea-motion-ease-out…
Props
Collapsible props
Una sección que se abre y se cierra, sin el aspecto de tarjeta de un acordeón.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | - | El contenido que se abre y se cierra. |
titleobligatoria | ReactNode | - | El texto del disparador siempre visible. |
className | string | - | |
defaultExpanded | boolean | - | Abierto al inicio. |
isExpanded | boolean | - | Abierto (controlado). |
onExpandedChange | ((open: boolean) => void) | - | Se llama cuando se abre o se cierra. |
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.
- Estados
- Hover (CSS)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-collapsible.alea-collapsible-trigger.alea-collapsible-chevron.alea-collapsible-panel.alea-collapsible-content
Accesibilidad
- Un botón con aria-expanded controla el panel; el panel se anima hasta su altura (patrón expand).
Teclado
| Tecla | Acción |
|---|---|
| Enter o Espacio | Abre o cierra |
Qué hacer y qué evitar
Hacer
- Nombra el disparador según lo que muestra (Opciones avanzadas).
Evitar
- No escondas campos obligatorios en él.