'/%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}
Capas
Drawer
Un panel que entra desde un lado para filtros, detalles o navegación.
import { DrawerTrigger, Drawer, DrawerContent } from '@alea/ui';
Ejemplos
Drawer
Desde el final por defecto; también desde el inicio y abajo.
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-surface…--alea-surface-overlay…
Space
--alea-space-4…
Radius
--alea-radius-lg…
Shadow
--alea-shadow-pop…
Layer
--alea-z-modal…
Component
--alea-drawer-size…--alea-glass-blur…--alea-glass-rim…--alea-glass-saturate…--alea-glass-tint…
Props
Drawer props
Un panel que entra desde el costado: filtros, detalles, navegación en móvil. El foco queda atrapado, Escape cierra.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
motion | MotionProp | - | Cómo entra y sale (por defecto: desde su borde): un preset, false, u opciones. |
placement | "start" | "end" | "bottom" | 'end' | Lado desde el que entra. Por defecto end (derecha en escritura de izquierda a derecha). |
size | string | number | 420 | Ancho (start/end) o alto (bottom). Por defecto 420 px. |
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.
- Variantes
placementstartendbottom- Motion
- riseslideAcepta una prop motion para su entrada y salida.
- 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-modal-overlay.alea-drawer-overlay.alea-drawer- Atributos data
data-placement=startdata-placement=bottomdata-placement=enddata-fullscreen-below=smdata-fullscreen-below=md
Accesibilidad
- Un diálogo modal: el foco entra y se queda ahí; Escape lo cierra.
Teclado
| Tecla | Acción |
|---|---|
| Escape | Cierra |
| Tab | Recorre el interior |
Qué hacer y qué evitar
Hacer
- Ponle título.
Evitar
- No pongas todo el flujo de una página en un cajón.