'/%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}
Maquetación
PaneLayout
Una herramienta a pantalla completa: una barra arriba, paneles a ambos lados y el área de trabajo en medio. En tablets se va el panel inicial; en teléfonos, un área a la vez detrás de pestañas.
import { PaneLayout } from '@alea/ui';
Ejemplos
Un editor
Barra, capas, lienzo y estilo. Estrecha la ventana: primero se van las capas, luego en teléfonos un área a la vez detrás de pestañas.
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-bg…--alea-border…--alea-surface…--alea-surface-deep…
Space
--alea-space-2…--alea-space-3…--alea-space-4…--alea-space-6…
Props
PaneLayout props
Una herramienta a pantalla completa: una barra arriba, paneles a los lados y el área de trabajo en medio; en tablets se va el panel inicial, en teléfonos un área a la vez detrás de pestañas.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | - | El área de trabajo (lienzo, editor, vista previa). |
bar | ReactNode | - | La barra de arriba: volver, el nombre del documento, herramientas, publicar. |
className | string | - | Clases extra para el elemento raíz. |
end | ReactNode | - | El panel del lado final (inspector, propiedades, comentarios). Una pestaña en teléfonos. |
height | Height<string | number> | - | Alto de todo el layout. Por defecto 100dvh (una herramienta a pantalla completa). |
labels | { start?: string; main?: string; end?: string | undefined; } | undefined | - | Nombres de las tres áreas, para los landmarks y las pestañas en teléfonos. Por defecto Capas, Lienzo, Inspector (traducidos). |
mainAs | "div" | "main" | - | El elemento del área de trabajo: main (por defecto) cuando el layout es la página, div cuando va dentro de otra página. |
start | ReactNode | - | El panel del lado inicial (capas, archivos, esquema). Se oculta por debajo de 1280 px, una pestaña en teléfonos. |
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
mainAsdivmain- 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-panes.alea-panes-bar.alea-panes-tabs.alea-panes-start.alea-panes-main.alea-panes-end- Atributos data
data-startdata-enddata-area=startdata-area=maindata-area=end
Accesibilidad
- Los paneles son landmarks complementary y el área de trabajo es main, cada uno nombrado por labels.
- En teléfonos el cambio de área es un segmented control; las áreas ocultas salen de la página, así que el foco nunca cae en ellas.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Recorre la barra y luego los paneles visibles en orden de lectura |
| Izquierda o Flecha derecha | Cambia de área en teléfonos |
Qué hacer y qué evitar
Hacer
- Nombra las áreas por lo que contienen: Capas, Lienzo, Estilo.
- Deja en la barra solo el nombre del documento, unas pocas herramientas y una acción principal.
Evitar
- No pongas la acción principal solo en un panel: los teléfonos muestran un área a la vez.
En Figma
Pane layout en Desktop, Tablet y Phone.