Resizable Panel
Panels side by side or stacked, with handles to drag, or move with the arrow keys, to resize them.Side by side
Preview
Code
TownshipsHakha, Sittwe, Labutta, Myitkyina
HakhaChin State · 14 organizations · 32 projects
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Resizable } from '@advui/core'
<Resizable height={320}>
<Resizable.Panel defaultSize={30} minSize={20}>…</Resizable.Panel>
<Resizable.Handle withHandle aria-label="Resize sidebar" />
<Resizable.Panel>…</Resizable.Panel>
</Resizable>Examples
Stacked
Preview
Code
QuerySELECT township, COUNT(*) FROM activities GROUP BY township
Results330 townships · 0.4 s
Three panels, collapsible
Controlled sizes. Focus a handle and press Enter to close or reopen a side panel.Preview
Code
FiltersSector, state, status
Activities1,248 results
DetailsPick an activity
API reference
Resizable
The group. Also takes View props; give it a height for side-by-side panels.| Prop | Type | Default | Description |
|---|---|---|---|
direction | 'horizontal' | 'vertical' | 'horizontal' | Side by side, or stacked. |
sizes | number[] | — | Panel sizes in percent (controlled). They add up to 100. |
onSizesChange | (sizes: number[]) => void | — | Called with the new `sizes`. |
onSizesCommit | (sizes: number[]) => void | — | A drag or key press ended. Save the layout here. |
keyboardStep | number | 5 | Percent moved by one arrow key press. |
labels | Partial<ResizableLabels> | — | Default handle name ("Resize"), for translation. |
Resizable.Panel
Also takes View props.| Prop | Type | Default | Description |
|---|---|---|---|
defaultSize | number | — | Starting size in percent. Default: an equal share of what is left. |
minSize | number | — | Smallest size, in percent of the group. |
maxSize | number | — | Largest size, in percent of the group. |
collapsible | boolean | false | Dragging below half of `minSize` closes it; Enter on the handle closes and reopens it. |
collapsedSize | number | 0 | Size when collapsed, in percent. |
Resizable.Handle
Place one between each pair of panels.| Prop | Type | Default | Description |
|---|---|---|---|
aria-label | string | — | Say what it resizes: "Resize sidebar". |
withHandle | boolean | false | Shows a grip on the line. |
disabled | boolean | false | Fixes the sizes. |
Accessibility
- Each handle is a focusable
separator(the WAI-ARIA window splitter) witharia-valuenowas the size of the panel before it, its limits, andaria-controlspointing at that panel. - Name every handle by what it resizes ("Resize filters").
- On iOS and Android the handle is an adjustable element: swipe up or down with VoiceOver or TalkBack to resize, and double-tap to close or reopen a collapsible panel.
- A panel collapsed to 0 is hidden, so its content leaves the tab order.
| Key | Action |
|---|---|
| Arrow keys | Move the focused handle (left/right, or up/down when stacked). |
| Home / End | Make the panel before it as small or as large as it can be. |
| Enter | Close or reopen a collapsible panel. |
Responsive behavior
Sizes are percentages, so panels keep their shares as the window changes. On phones prefer direction="vertical" or a Tabs layout.
Platform notes
Web
Drag with a mouse, pen or finger (pointer capture), or use the keyboard.
iOS
Drag the line; its touch area is wider than it looks.
Android
Same as iOS.