Resizable
Accessible resizable panel groups and layouts with keyboard support.
Divergence from Blok
Blazor-native resize engine — not a react-resizable-panels wrapper. Blok wraps the react-resizable-panels React library. This port uses a colocated JS module (Resizable.razor.js) that attaches pointerdown / pointermove / keydown handlers to each handle and updates adjacent panel flex-basis values in pixels. The consumer API is identical: same three components, same parameters, same data-slot attributes, same CSS class strings.
overflow: hidden added to ResizablePanel. The React library sets this on panels internally. Our port adds it via the default class so content clips correctly when a panel is resized below its content size. Override with ClassName="overflow-auto" when you need a scrollable panel.
Keyboard step is 10 px (Shift+Arrow = 50 px). Home snaps to MinSize, End snaps to MaxSize.
Examples
Default (horizontal)
With handle icon
Vertical
Three panels
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| ResizablePanelGroup | Root container that owns the resize engine. Sets the layout direction, initialises the JS drag module on first render, and cascades the direction to child ResizableHandle components. |
| ResizablePanel | A single resizable content area. Sets an initial flex-basis from DefaultSize (or grows equally when omitted). Exposes MinSize and MaxSize constraints read by the drag engine. |
| ResizableHandle | The drag handle between two adjacent ResizablePanel siblings. Focusable — use arrow keys to resize by 10 px (Shift+Arrow = 50 px), Home to snap to the left panel's MinSize, End to snap to its MaxSize. |
ResizablePanelGroup
Root container that owns the resize engine. Sets the layout direction, initialises the JS drag module on first render, and cascades the direction to child ResizableHandle components.
| Property | Type | Required | Description |
|---|---|---|---|
| Direction | ResizableDirection | Layout axis. Default: ResizableDirection.Horizontal. Other value: Vertical. | |
| ClassName | string? | Extra CSS classes appended to the group <div>. | |
| ChildContent | RenderFragment? | Should contain alternating ResizablePanel and ResizableHandle children. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes forwarded to the root <div>. |
ResizablePanel
A single resizable content area. Sets an initial flex-basis from DefaultSize (or grows equally when omitted). Exposes MinSize and MaxSize constraints read by the drag engine.
| Property | Type | Required | Description |
|---|---|---|---|
| DefaultSize | double? | Initial size as a percentage of the group (0–100). When omitted the panel shares available space equally. Default: null. | |
| MinSize | double | Minimum panel size as a percentage of the group. Default: 0. | |
| MaxSize | double | Maximum panel size as a percentage of the group. Default: 100. | |
| ClassName | string? | Extra CSS classes appended to the panel <div>. Use overflow-auto to make the panel scrollable. | |
| ChildContent | RenderFragment? | Panel content. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes forwarded to the panel <div>. |
ResizableHandle
The drag handle between two adjacent ResizablePanel siblings. Focusable — use arrow keys to resize by 10 px (Shift+Arrow = 50 px), Home to snap to the left panel's MinSize, End to snap to its MaxSize.
| Property | Type | Required | Description |
|---|---|---|---|
| WithHandle | bool | When true, renders a visible grip icon in the centre of the handle. Default: false. | |
| ClassName | string? | Extra CSS classes appended to the handle <div>. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes forwarded to the handle <div>. |