Mushilu-San UI Resizable
Splits an area into panels that the user can resize by dragging a handle.
Selector: mui-resizable-panel-group
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@mushilu-san/ui/layout';Loading example…
Overview
defaultSize, minSize and maxSize as percentages of the group. direction sets whether the panels sit side by side or stacked.
role="separator" and is focusable. Its aria-valuenow is the size of the panel before it, in percent. The arrow keys move it in small steps, so resizing does not need a mouse.
When to use
A file tree next to an editor, or a list next to a detail view, where the user needs to choose the split.
When not to use
A fixed layout. Use a Grid or a Stack. Use Grid instead.
Guidelines
Do
Set minSizeso a panel never collapses to something unusable.Use withHandleto show a visible grip on the separator.
Don't
Do not nest resizable groups more than one level deep.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
handle | separator | aria-orientation is the perpendicular of the group direction, as the separator line runs across it. |
Keyboard
| Keys | Action |
|---|---|
| ArrowLeftArrowRight (or UpDown when vertical) |
Give panels meaningful content so their sizes are understood. Do not hide key content by allowing it to shrink to zero.
API
ResizablePanelGroup
| Name | Type | Default | Description |
|---|---|---|---|
direction | 'horizontal' | 'vertical' | 'horizontal' | Layout axis: `horizontal` places panels side by side, `vertical` stacks them. Default `horizontal`. |
CSS parts
::part(root)
ResizablePanel
| Name | Type | Default | Description |
|---|---|---|---|
defaultSize | number | 50 | Initial size as a percentage of the group. Default `50`. |
minSize | number | 10 | Smallest size the user can drag this panel to, as a percentage. Default `10`. |
maxSize | number | 90 | Largest size the user can drag this panel to, as a percentage. Default `90`. |
CSS parts
::part(panel)
ResizableHandle
| Name | Type | Default | Description |
|---|---|---|---|
withHandle | boolean | false | Shows a visible grip on the separator. Accepts attribute presence, e.g. <… withHandle>. |
CSS parts
::part(handle)
Tokens
--mui-color-border--mui-color-focus-ring--mui-touch-target