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
SplitterPane
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.
Related Components
- Resizable — Simpler two-panel resizable group
- Sidebar — App-level collapsible navigation sidebar
- ScrollArea — Styled scrollable container for overflowing pane content