All components (244)

Dockable panels

Structure · DockLayout · .amset-dock

What it is and when to use it

A workspace with dockable panels: four areas (left, centre, right and bottom), each with its tabs.

When to use it

Tools for long work sessions: a report editor, an operations panel, a support console, where each person places the panels as they like.
panels are all the possible panels; the layout (layout or defaultLayout, created with createDockLayout) says which area each one goes in, which one is shown, how big each area is and whether it is collapsed.
A panel is taken to another area from its menu or by dragging its tab. The sides and the bottom area resize with their separator and collapse.
onLayoutChange hands out the new layout to save it.

When not to

Two or three fixed areas that only resize: ResizablePanels. The frame of an application with a menu and a header: AppShell.

Keyboard: the tabs of each area are traversed with the arrows; each panel's menu offers to move or close it; the separator moves with the arrows, and Home and End take it to the minimum and the maximum.

Accessibility: each area is a named region and its tabs are a real tab group; the separator says its size as a percentage and moving or closing a panel is announced.

Fine appearance: --amset-dock-height, --amset-dock-gap (gap between areas) and --amset-dock-separator (thickness of the separator).

What it looks like

catalogue.pdf · orders.xlsx

925 silver ring with a cubic zirconia.

10:32 · Order #1042 shipped.

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

Props

Import it with import { DockLayout } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`label`required	`string`	Which workspace it is («Report editor»). Required.
`panels`required	`readonly DockPanel[]`	All the panels that can appear; where each one goes is said by the layout.
`className`	`string`	Merged with the library classes; it does not replace them.
`defaultLayout`	`DockLayoutState`	—
`layout`	`DockLayoutState`	The layout. If passed, whoever uses it controls it (to save it, for example).
`onClose`	`(key: string) => void`	When a panel is closed from its menu.
`onLayoutChange`	`(layout: DockLayoutState) => void`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-dock-height`	`34rem`
`--amset-dock-gap`	`var(--amset-space-1)`
`--amset-dock-separator`	`0.75rem`

How to change it

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

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: