'/%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
DockedWindow
Una ventana anclada abajo de la pantalla que sigue abierta mientras la gente trabaja: un mensaje que se está escribiendo, subidas en curso, un chat. Se minimiza a su barra, crece hasta casi toda la pantalla, y varias se ubican lado a lado.
import { DockedWindow, DockedWindowStack } from '@alea/ui';
Ejemplos
Redacción y subidas
Dos ventanas ancladas lado a lado: un mensaje que se está escribiendo (minimízalo con la barra, agrándalo hasta casi toda la pantalla) y subidas en curso con su cantidad en la barra. En una app la pila queda fija abajo de la pantalla; aquí se muestra dentro de la vista previa.
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-raised…--alea-text…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…--alea-space-4…
Radius
--alea-radius-lg…--alea-radius-md…
Type
--alea-font-family-body…--alea-font-size-sm…--alea-font-weight-regular…--alea-font-weight-semibold…
Shadow
--alea-shadow-card…--alea-shadow-pop…
Motion
--alea-motion-duration-base…--alea-motion-ease-out…
Layer
--alea-z-modal…
Props
DockedWindow props
Una ventana anclada abajo de la pantalla que la gente mantiene abierta mientras trabaja: un mensaje que se está escribiendo, subidas en curso, un chat. Se minimiza a su barra, puede crecer hasta casi toda la pantalla, y varias se ubican lado a lado en un DockedWindowStack. No es modal: la página sigue usable.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | - | El contenido: un formulario (redactar un mensaje), una lista (subidas), un chat. |
titleobligatoria | ReactNode | - | El título de la barra; da nombre a la ventana. |
allowMaximize | boolean | - | Muestra un botón que la agranda hasta casi toda la pantalla. |
className | string | - | Clases extra. |
defaultMinimized | boolean | false | Minimizada al inicio. |
footer | ReactNode | - | Contenido fijo abajo: Enviar, Descartar. |
height | number | 420 | Altura del contenido cuando está abierta, en px. Por defecto 420. |
isMinimized | boolean | - | Minimizada a su barra de título (controlado). |
meta | ReactNode | - | Algo junto al título: una cantidad, un estado. |
onClose | (() => void) | - | Muestra un botón de cerrar y llama a esto. |
onMinimizedChange | ((minimized: boolean) => void) | - | Se llama cuando se minimiza o se restaura. |
width | number | 480 | Ancho cuando está anclada, en px. Por defecto 480. |
DockedWindowStack props
Agrupa ventanas ancladas lado a lado a lo largo de la parte inferior de la pantalla; en teléfonos se apilan a ancho completo.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | - | Elementos DockedWindow, el más nuevo al final. |
className | string | - | Clases extra. |
placement | "start" | "end" | 'end' | Dónde se ubica la pila: end (por defecto) o start. |
position | "fixed" | "inline" | 'fixed' | fixed al viewport (por defecto) o inline, para demos y vistas previas. |
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.
DockedWindow
- 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-dock-win.alea-dock-bar.alea-dock-title.alea-dock-title-text.alea-dock-meta.alea-dock-tools.alea-dock-content.alea-dock-body.alea-dock-footer- Atributos data
data-minimizeddata-maximized
DockedWindowStack
- Variantes
placementstartendpositionfixedinline- 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-dock-stack- Atributos data
data-position=fixeddata-placement=enddata-placement=startdata-position=inline
Accesibilidad
- Un diálogo no modal con su título como nombre: la página sigue usable y el foco nunca queda atrapado.
- La barra de título es un botón que minimiza y restaura la ventana, con aria-expanded.
- Minimizar, maximizar y cerrar son botones con nombre; Escape sale del tamaño completo.
- El contenido minimizado también queda oculto para lectores de pantalla, no solo visualmente.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Recorre los botones de la barra y el contenido |
| Enter o Espacio (en el título) | Minimiza o restaura |
| Escape | Sale del tamaño completo |
Qué hacer y qué evitar
Hacer
- Úsala para trabajo que corre junto a la página (escribir, subir archivos, chatear).
- Muestra el progreso o una cantidad en meta mientras está minimizada.
- Mantén como máximo tres ventanas abiertas; en teléfonos se apilan a ancho completo.
Evitar
- No la uses para una decisión que hay que tomar ahora: eso es un Modal o un AlertDialog.
- No pierdas lo escrito al cerrarla: pregunta, o guarda un borrador.
En Figma
DockedWindow con State (Open, Minimized, Maximized), y slots de título, meta y pie.