Todos los componentes (204)

Paneles redimensionables

Gestión · ResizablePanels · .amset-panels

Qué es y cuándo usarlo

Dos o más paneles con un separador que se arrastra. El caso de siempre: la lista a un lado, el detalle al otro, y quien mira decide cuánto ocupa cada cosa. El separador no es solo arrastrable: se mueve también con el teclado.

Cuándo usarlo

Lista y detalle, un editor con su vista previa, un catálogo en tres columnas.
shipping para empezar en proporciones ([2, 1]: el primero, el doble que el segundo); sizes con onChange para guardarlo y recuperarlo (en tantos por ciento que suman cien).
orientation="vertical" para apilarlos uno encima de otro.
El contenedor ocupa el alto que se le dé: aquí no se inventa ninguno, porque vive dentro de una pantalla que ya sabe cuánto mide.

Cuándo no

Un detalle que se abre por encima y se cierra: Drawer.
Secciones que se pliegan una debajo de otra: Accordion.

Teclado: Tab llega a cada separador. En horizontal, las flechas izquierda y derecha lo mueven un step (un 2 % por defecto), y en un idioma que se escribe de derecha a izquierda la flecha sigue moviéndolo hacia donde apunta; en vertical, arriba y abajo. Re Pág y Av Pág saltan cinco pasos, e Inicio y Fin lo llevan a los topes. Lo que gana un panel lo pierde el de al lado, nunca los demás. Un panel con más contenido del que cabe también recibe el foco, para poder desplazarlo con el teclado.

Accesibilidad: el grupo se llama como label y cada panel es una región con su nombre. El separador es un separator enfocable que dice qué ajusta («Ajustar Pedidos y Detalle») y por dónde va con palabras («45 % para Pedidos»). Cada panel tiene su min (10 % por defecto): no hay manera de dejar uno en dos píxeles. Con el dedo, el separador se ensancha para poder agarrarlo.

Aspecto fino: variables CSS --amset-panels-*: -extra, -handle, -handle-hover, -separator, -target. El tamaño mueve el hueco entre paneles y el tirador. El separador se VE en -separator y se agarra en -target, con el area de mas metida por encima de los paneles.

Cómo se ve

Las carpetas.

Lo que se edita.

<ResizablePanels
  label="Editor"
  panels={[
    { key: 'lista', label: 'Lista', content: <Lista /> },
    { key: 'detalle', label: 'Detalle', content: <Detalle /> },
  ]}
/>

Props

Se importa con import { ResizablePanels } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Obligatoria: el grupo se anuncia con ella.
`panels`obligatoria	`readonly ResizablePanel[]`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`onChange`	`(sizes: readonly number[]) => void`	—
`orientation`	`PanelsOrientation`	—
`shipping`	`readonly number[]`	Proporciones iniciales. `[2, 1]` es «el primero el doble que el segundo».
`size`	`"sm" \| "md" \| "lg"`	—
`sizes`	`readonly number[]`	Controlado: tantos por ciento que suman cien.
`step`	`number`	Cuanto mueve cada flecha, en tanto por ciento. Por defecto 2.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-panels-separator`	`var(--amset-space-3)`
`--amset-panels-handle`	`1.75rem`
`--amset-panels-handle-hover`	`2.5rem`
`--amset-panels-target`	`1.5rem`
`--amset-panels-extra`	`calc((var(--amset-panels-target) - var(--amset-panels-separator)) / 2)`

Cómo se cambia

.amset-panels {
  --amset-panels-separator: ...;
  --amset-panels-handle: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: