Resizable
Panels side by side or stacked, whose sizes the reader changes by dragging the handle between them.
Resizable panels split an area into parts the reader can resize: a list beside its detail, an editor above its output. Each handle between two panels can be dragged, or moved with the keyboard. It is built on react-resizable-panels, whose props it passes through.
// apps/docs/examples/ui/resizable.tsx'use client';
import { ResizableHandle, ResizablePanel, ResizablePanelGroup,} from '@workspace/active-ui/components/primitives/resizable';
/** * Panels whose sizes the reader drags: a list beside a detail pane, the * detail split again from top to bottom. Sizes as strings are percentages; * numbers would be pixels. */export default function ResizableExample() { return ( <ResizablePanelGroup orientation="horizontal" className="min-h-64 max-w-lg rounded-lg border" > <ResizablePanel defaultSize="35" minSize="20"> <div className="flex h-full items-center justify-center p-4 text-sm"> Participants </div> </ResizablePanel> <ResizableHandle withHandle aria-label="Resize the list" /> <ResizablePanel defaultSize="65"> <ResizablePanelGroup orientation="vertical"> <ResizablePanel defaultSize="60"> <div className="flex h-full items-center justify-center p-4 text-sm"> Details </div> </ResizablePanel> <ResizableHandle aria-label="Resize the details" /> <ResizablePanel defaultSize="40" minSize="15"> <div className="flex h-full items-center justify-center p-4 text-sm"> History </div> </ResizablePanel> </ResizablePanelGroup> </ResizablePanel> </ResizablePanelGroup> );}Usage#
import { ResizableHandle, ResizablePanel, ResizablePanelGroup,} from '@workspace/active-ui/components/primitives/resizable';
<ResizablePanelGroup orientation="horizontal"> <ResizablePanel defaultSize="35" minSize="20"> List </ResizablePanel> <ResizableHandle withHandle aria-label="Resize the list" /> <ResizablePanel defaultSize="65">Detail</ResizablePanel></ResizablePanelGroup>;Anatomy#
Resizable: the area.Panel Group orientation:horizontal(side by side, the default) orvertical(stacked).onreports the sizes, for example to store them.Layout Change Resizable: a part.Panel default,Size minandSize max: a string is a percentage (Size "35"), a number is pixels (200).collapsiblewithcollapsedlets a panel collapse when dragged below its minimum.Size Resizable: the boundary between two panels.Handle withdraws a grip on it.Handle
Panels nest: a panel can hold a group of the other orientation, as in the example.
What your application provides#
A height for a horizontal group, or for the area a vertical group fills.
An accessible name for each handle (
aria-), such as "Resize the list".label Keeping the sizes across visits, if wanted, from
on.Layout Change
Accessibility and keyboard#
Each handle is a focusable
role="separator"with its value: the arrow keys resize the panels beside it,HomeandEndmove it to the limits, andEntercollapses or expands a collapsible panel.
API#
ResizableHandle
Props
- Type
boolean
Draws a grip on the handle, so it reads as something to drag.
Also takes the props of react-resizable-panels, unchanged and documented there: class, disable, disabled, element, id, preview, style.
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.
ResizablePanel
No props of its own.
Also takes the props of react-resizable-panels, unchanged and documented there: class, collapsed, collapsed, collapsible, default, disabled, element, group, id, max, min, on, panel, style.
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.
ResizablePanelGroup
No props of its own.
Also takes the props of react-resizable-panels, unchanged and documented there: children, class, default, disable, disabled, element, group, id, on, on, orientation, resize, resize, style.
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.
This page adapts the Resizable documentation of shadcn/ui (MIT licence) to this package; see Third-party notices.