Static WebAssembly demo on GitHub Pages. Everything runs in your browser; server-only features use labeled stand-ins. Run locally for the full Blazor Server experience.

ComponentsLayout and structure

Split panel

Two panels with a draggable divider between them, so readers choose how much room each side gets. Use it for list and detail, editor and preview, or code and output.

Side by side

FirstPanel and SecondPanel sit left and right of a divider. Drag the divider to share the room; double-click it to return to the starting size.

Ammonite

Trilobite

Fern frond

Shark tooth

Ammonite

Jurassic, Dorset coast. Spiral shell with ribbed whorls, 14 cm across.

Stacked

Horizontal divides the area with a horizontal line, putting the panels one above the other. Give the split panel a height.

titrate(sample: "B-7", reagent: "NaOH 0.1 M")
record(volume: 23.4)

Output

Endpoint reached at 23.4 mL. Concentration of B-7: 0.117 M.

Sizes from code

FirstPanelInitialSize sets the starting size in pixels and MinPanelSize the smallest either panel may become. GetDividerPositionAsync, SetDividerPositionAsync and ResetDividerPositionAsync move the divider from code.

At least 120 px wide.

So is this one, however far you drag.

Nested panels

A panel can hold another split panel, here a three-pane mail layout.

Inbox

Starred

Sent

Shelf audit

Clara Duval

Autumn reading list

Hugo Salles

Signed copies

Noor Haddad

Shelf audit

Travel writing is three books short; two copies of “Salt and Cedar” were shelved under poetry.

Playground

Change any parameter; the markup below shows only the values that differ from the defaults.

Map
Timetable
Elevation
Panel gap (px)
Padding (px)
Min panel size (px)
<MudSplitPanel Elevation="1" Rounded="true" Padding="8">
    <FirstPanel>Map</FirstPanel>
    <SecondPanel>Timetable</SecondPanel>
</MudSplitPanel>

Starting .NET in your browser…