'/%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
Splitter
Dos paneles con un asa para cambiar su tamaño, arrastrando o con el teclado.
import { Splitter } from '@alea/ui';
Ejemplos
Splitter
Arrastra el asa, o enfócala y usa las flechas.
Layers
Header, Hero, Pricing
Canvas
The selected frame
Vertical
Paneles apilados: código arriba, vista previa abajo.
Code
Preview
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…--alea-accent-subtle…--alea-border…--alea-border-control…--alea-surface-deep…
Radius
--alea-radius-md…
Motion
--alea-motion-duration-fast…
Component
--alea-split…
Props
Splitter props
Dos paneles con un asa entre ellos: arrástrala, o enfócala y usa las flechas.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | [ReactNode, ReactNode] | - | Los dos paneles. |
aria-label | string | - | Nombre del asa para lectores de pantalla. Por defecto "Cambiar tamaño". |
className | string | - | Clases extra para el elemento raíz. |
defaultSize | number | 50 | Tamaño inicial del primer panel en porcentaje. Por defecto 50. |
max | number | 85 | Tamaño máximo del primer panel, en %. Por defecto 85. |
min | number | 15 | Tamaño mínimo y máximo del primer panel, en porcentaje. Por defecto 15 y 85. |
onSizeChange | ((size: number) => void) | - | Se llama con el tamaño del primer panel en %. |
orientation | "horizontal" | "vertical" | 'horizontal' | horizontal: lado a lado (por defecto); vertical: apilados. |
size | number | - | Tamaño del primer panel en porcentaje (controlado). |
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
orientationhorizontalvertical- Estados
- Hover (CSS)Keyboard focus
- 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-splitter.alea-split-pane.alea-split-handle.alea-split-grip- Atributos data
data-orientation=vertical
Accesibilidad
- El asa es un separador que recibe foco con su tamaño como valor.
Teclado
| Tecla | Acción |
|---|---|
| Flechas | Cambia el tamaño un 2% |
| Shift + flechas | Cambia el tamaño un 10% |
| Inicio / Fin | El más pequeño o el más grande |
| Enter | Vuelve al tamaño por defecto |
Qué hacer y qué evitar
Hacer
- Define min y max para que los paneles nunca desaparezcan.
- Dale al separador un aria-label que diga qué redimensiona.
Evitar
- No lo uses en teléfonos: apila los paneles.
- No guardes tamaños que la persona no pueda restablecer (Enter restablece).