Todos los componentes (244)

Paneles acoplables

Estructura · DockLayout · .amset-dock

Qué es y cuándo usarlo

Un espacio de trabajo con paneles acoplables: cuatro zonas (izquierda, centro, derecha y abajo), cada una con sus pestañas.

Cuándo usarlo

Herramientas de trabajo largo: un editor de informes, un panel de operaciones, una consola de soporte, donde cada persona coloca los paneles a su gusto.
panels son todos los paneles posibles; la disposición (layout o defaultLayout, que se crea con createDockLayout) dice en qué zona va cada uno, cuál se ve, cuánto mide cada zona y si está plegada.
Un panel se lleva a otra zona desde su menú o arrastrando su pestaña. Los lados y la zona de abajo cambian de tamaño con su separador y se pliegan.
onLayoutChange entrega la disposición nueva para guardarla.

Cuándo no

Dos o tres zonas fijas que solo cambian de tamaño: ResizablePanels. El armazón de una aplicación con menú y cabecera: AppShell.

Teclado: las pestañas de cada zona se recorren con las flechas; el menú de cada panel ofrece moverlo o cerrarlo; el separador se mueve con las flechas, e Inicio y Fin lo llevan al mínimo y al máximo.

Accesibilidad: cada zona es una región con nombre y sus pestañas son un grupo de pestañas de verdad; el separador dice su tamaño en porcentaje y mover o cerrar un panel se anuncia.

Aspecto fino: --amset-dock-height, --amset-dock-gap (hueco entre zonas) y --amset-dock-separator (grosor del separador).

Cómo se ve

catalogo.pdf · pedidos.xlsx

Anillo de plata 925 con circonita.

10:32 · Pedido #1042 enviado.

<DockLayout
  label="Espacio de trabajo"
  style={{ width: "100%" }}
  panels={paneles}
  defaultLayout={createDockLayout({
    left: ["archivos"],
    center: ["editor", "notas"],
    bottom: ["consola"],
  })}
/>

Props

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

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Que espacio de trabajo es («Editor de informes»). Obligatorio.
`panels`obligatoria	`readonly DockPanel[]`	Todos los paneles que pueden aparecer; donde esta cada uno lo dice la disposicion.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`defaultLayout`	`DockLayoutState`	—
`layout`	`DockLayoutState`	La disposicion. Si se pasa, la controla quien lo usa (para guardarla, por ejemplo).
`onClose`	`(key: string) => void`	Al cerrar un panel desde su menu.
`onLayoutChange`	`(layout: DockLayoutState) => void`	—

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-dock-height`	`34rem`
`--amset-dock-gap`	`var(--amset-space-1)`
`--amset-dock-separator`	`0.75rem`

Cómo se cambia

.amset-dock {
  --amset-dock-height: ...;
  --amset-dock-gap: ...;
}

En el banco de pruebas

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