Resizable
Resizable
Accessible resizable panel groups and layouts with keyboard support.
Horizontal
Panels arranged side by side with a vertical drag handle.
Vertical
Panels stacked vertically with a horizontal drag handle.
With Handle Grip
Visual grip indicator on the resize handle.
Three Panel Layout
Common sidebar + main + details layout.
Nested Layout
Combine horizontal and vertical layouts.
Email Client Example
Real-world layout example similar to email clients.
- Horizontal and vertical orientations
- Min/max size constraints per panel
- Optional visual grip handle
- Nested layouts support
- OnLayoutChange event for persistence
Implementation Note
Full drag-to-resize functionality requires JavaScript interop for mouse move/up event tracking. The current implementation provides component structure and styling. For production use with full drag behavior, additional JS interop would need to be added.
Features
- Horizontal and vertical orientations
- Min/max size constraints per panel
- Optional visual grip handle
- Nested layouts support
- OnLayoutChange event for persistence
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Direction | ResizableDirection | Horizontal | Layout direction. Options: Horizontal, Vertical. |
| DefaultSize | int | — | Initial size of the panel as a percentage (0–100). |
| MinSize | int? | — | Minimum allowed size of the panel as a percentage. |
| MaxSize | int? | — | Maximum allowed size of the panel as a percentage. |
| Index | int | — | Zero-based index of the ResizableHandle within its group. |
| WithHandle | bool | false | When true, renders a visible grip icon on the drag handle. |
| OnLayoutChange | EventCallback<int[]> | — | Fired when the panel layout changes. Receives current sizes array. |
| Class | string? | — | Additional CSS classes for the component root element. |