Splitters
Reshapable layout containers that allow users to adjust the relative size of two content panels.
Use this example to explore default behavior, customization points, and accessibility-friendly patterns in a real Blazor page.
Vertical Splitter
DefaultSplits content into left and right panels with a draggable handle and configurable splitter/handle colors.
Horizontal Splitter
MgOrientation.HorizontalAPI Reference
MgSplitter
| Property | Type | Default | Description |
|---|---|---|---|
| Orientation | MgOrientation | Vertical | Split direction (Vertical or Horizontal). |
| InitialPanel1Percent | int | 50 | Initial split percentage for the first panel. |
| SplitterColor | string | #cbd5e1 | Base fill color of the splitter bar. |
| SplitterActiveColor | string | #93c5fd | Splitter fill color while dragging. |
| SplitterBorderColor | string | #94a3b8 | Border color of the splitter bar. |
| HandleColor | string | #334155 | Solid grip color for the splitter handle. |