Maquetación

SplitLayout

Una columna principal y otra más estrecha lado a lado: un editor y sus ajustes, una lista y su detalle. Se apilan cuando el propio layout se estrecha, esté donde esté.

import { SplitLayout } from '@alea/ui';

Ejemplos

Trabajo y ajustes

La columna ancha tiene el trabajo; la estrecha, sus ajustes. Estrecha la ventana: se apilan por debajo de 760 px de su propio espacio.

La lista primero

narrow="start" pone una lista antes del detalle que abre. narrowWidth define el ancho de la lista.

Tokens

Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.

Space

--alea-space-4…

Component

--alea-split-layout-narrow…

Props

`SplitLayout` props

Una columna principal y otra más estrecha lado a lado (un editor y sus ajustes, una lista y su detalle); se apilan cuando el espacio se estrecha.

Prop	Tipo	Por defecto	Descripción
`children`obligatoria	`[ReactNode, ReactNode]`	-	Dos hijos: el contenido principal y una columna más estrecha (detalles, ajustes, un resumen).
`className`	`string`	-	Clases extra para el elemento raíz.
`narrow`	`"start" \| "end"`	`'end'`	Qué hijo es la columna estrecha. end (por defecto): la principal y luego la lateral; start: primero una lista o un árbol, luego la principal.
`narrowWidth`	`number`	`340`	Ancho de la columna estrecha en px. Por defecto 340.
`stackBelow`	`"sm" \| "md" \| "lg"`	`'md'`	Por debajo de este ancho disponible las columnas se apilan (el layout mide su propio espacio, no la ventana). Por defecto md (760 px).
`style`	`CSSProperties`	-	Estilos en línea para el elemento raíz.

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: narrowstartend
stackBelowsmmdlg
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-split-layout.alea-split-layout-grid.alea-split-layout-col
Atributos data: data-narrow=startdata-stack=smdata-stack=mddata-stack=lg

Las columnas mantienen su orden de lectura al apilarse: la primera hija se lee primero.
No agrega landmarks; pon un título arriba de cada columna.

Qué hacer y qué evitar

Hacer

Pon el trabajo en la columna ancha y los ajustes o el resumen en la estrecha.
Usa narrow="start" para una lista que elige lo que muestra la columna principal.

Evitar

No lo uses para más de dos columnas: usa Grid.
No dependas del ancho de la ventana: mide su propio espacio, así que funciona dentro de paneles.

En Figma

Split layout con variantes Narrow (start, end) y Stacked.