Splitter
Multi-pane resizable layout for dashboards, editors, and IDE-style UIs. Supports horizontal, vertical, and nested arrangements.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Splitter />
When to Use
- Editor layouts with sidebar, main content, and inspector panels
- Dashboards where users adjust the size of multiple regions at once
- File manager style tri-panels (tree, list, preview)
- Anywhere Resizable's 2-pane model is not enough — Splitter accepts N panes
Left
Right
Editor
Terminal
Files
Code
Output
Pick a value to see it applied live. Horizontal places the divider vertically between side-by-side panes; Vertical places the divider horizontally between stacked panes.
Pane A
Pane B
API Reference
Splitter
| Prop | Type | Default | Description |
|---|---|---|---|
| Orientation | Lumeo.Orientation | Horizontal | Layout direction. Values: Horizontal, Vertical. |
| ChildContent | RenderFragment? | null | SplitterPane and SplitterDivider children. |
| Class | string? | null | Additional CSS classes. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. |
SplitterPane
| Prop | Type | Default | Description |
|---|---|---|---|
| Size | double | 0 | Initial size as a percentage. 0 means distribute remaining space equally among unset panes. |
| MinSize | double | 10 | Minimum size percentage. |
| MaxSize | double | 90 | Maximum size percentage. |
| Collapsible | bool | false | Reserved for future collapse behavior. |
| ChildContent | RenderFragment? | null | Pane content. |
| Class | string? | null | Additional CSS classes. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. |
SplitterDivider
Place a SplitterDivider between each pair of SplitterPane elements you want to resize. It binds to the nearest pane on each side at drag time.
| Prop | Type | Default | Description |
|---|---|---|---|
| Class | string? | null | Additional CSS classes. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. |
Related Components
- Resizable — Simpler two-panel resizable group
- Sidebar — App-level collapsible navigation sidebar
- ScrollArea — Styled scrollable container for overflowing pane content