SplitShell
Two-pane (master/detail) layout with optional resizable splitter
SSR mode
Examples
Horizontal
Start pane
End pane
Vertical
Top
Bottom
No borders, no fill, no gutters
Start pane (no gutters)
End pane (no gutters)
Resizable
Drag the divider between the panes to resize. Ratio controls the starting split. In resizable mode, style pane content directly — Gutters and BgFilled apply to static mode only.
List (40%)
Detail (60%)
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| SplitShell | Two-pane layout for master/detail or any split-axis arrangement. When IsResizable is true, wraps the panes in the ResizablePanelGroup primitive so users can drag the splitter; otherwise renders a static flex container. Wrapper-styling: Borders, Gutters, and BgFilled control the static-mode pane appearance so consumers do not need wrapper divs in slot content. |
SplitShell
Two-pane layout for master/detail or any split-axis arrangement. When IsResizable is true, wraps the panes in the ResizablePanelGroup primitive so users can drag the splitter; otherwise renders a static flex container. Wrapper-styling: Borders, Gutters, and BgFilled control the static-mode pane appearance so consumers do not need wrapper divs in slot content.
| Property | Type | Required | Description |
|---|---|---|---|
| Start | RenderFragment? | Left pane (when Direction = Horizontal) or top pane (when Vertical). In static mode the chunk owns background and padding via BgFilled / Gutters. | |
| End | RenderFragment? | Right pane (when Direction = Horizontal) or bottom pane (when Vertical). Same ownership rules as Start. | |
| Direction | Orientation | Split axis. Default: Orientation.Horizontal. Other values: Vertical. Shared Orientation enum. | |
| IsResizable | bool | When true, the panes are wrapped in ResizablePanelGroup and the consumer can drag the divider. Default: false. **Interactive-mode requirement:** IsResizable=true uses JSInterop — render in an interactive context (e.g. @rendermode InteractiveServer). The default IsResizable=false is SSR-safe. | |
| Ratio | double | Initial split ratio between Start and End when IsResizable = true. Range 0.0–1.0; default 0.5 (equal split). Ignored when IsResizable = false. | |
| Borders | bool | Toggles the divide-x / divide-y divider line between panes (static mode). Default: true. When false, no separator is rendered. | |
| Gutters | bool | Toggles p-4 on each pane wrapper (static mode only). Default: true. In resizable mode, style padding inside slot content directly. | |
| BgFilled | bool | Toggles bg-background on each pane wrapper (static mode only). Default: true. |