Resizable
Accessible resizable panel groups and layouts with drag-to-resize handles.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Resizable />
When to Use
- Split pane layouts such as a sidebar + content area
- Adjustable layouts where users control how much space each section occupies
- IDE-like or editor panels with resizable code, preview, and console areas
- Dashboards where users want to resize widgets or data panels
Panel One
Panel Two
Top
Bottom
Sidebar
Content
Panel
API Reference
ResizablePanelGroup
| Prop | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | null | The panels and handles content. |
| Direction | Lumeo.Orientation | Horizontal | Layout direction. Values: Horizontal, Vertical. |
| DefaultSizes | double[]? | null | Initial size percentages for each panel (e.g. [50, 50]). |
| Class | string? | null | Additional CSS classes. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. |
ResizablePanel
| Prop | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | null | The panel content. |
| Order | int | 0 | Zero-based index of the panel within the group. |
| DefaultSize | double | 50 | Default size as a percentage of the group. |
| MinSize | double | 10 | Minimum size percentage. |
| MaxSize | double | 90 | Maximum size percentage. |
| Class | string? | null | Additional CSS classes. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. |
ResizableHandle
| Prop | Type | Default | Description |
|---|---|---|---|
| PanelIndex | int | - | Index of the panel to the left/above this handle. Required. |
| WithHandle | bool | false | Shows a visible grip icon on the handle. |
| Class | string? | null | Additional CSS classes. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. |
Related Components
- ScrollArea — Styled scrollable container for overflowing panel content
- Card — Contained content sections that can live inside resizable panels
- Sidebar — Collapsible navigation sidebar for app-level layouts