ClassicSidebar Layout

Splitter

Verschiebbarer Panel-Trenner – horizontal oder vertikal. Handle bis zum Rand ziehen zum Einklappen, zurückziehen zum Ausklappen. Zustand wird dauerhaft im Browser gespeichert.

Horizontal – 2 Panes

Standard
Linke Pane
Handle ziehen →
Rechte Pane
Flex – bekommt den Rest
Mit Collapsible
Einklappbare Pane
Bis zum Rand ziehen → klappt ein
Rechte Pane

Vertikal – 2 Panes

Standard
Obere Pane
Handle ziehen ↓
Untere Pane

3 Panes horizontal

Gleichmäßig aufgeteilt
Pane 1
Pane 2
Pane 3 (flex)

Fixed Pane – einzelne Panes sperren

Mit Fixed="true" an einer einzelnen SplitterPane werden die angrenzenden Handles gesperrt – die Pane behält ihre Größe, der Handle wirkt wie ein normaler Border.

Mittlere Pane fixiert
Pane 1
verschiebbar
Pane 2 – Fixed
Größe gesperrt, Handles = Border
Pane 3
verschiebbar
Erste Pane fixiert
Pane 1 – Fixed
Größe gesperrt
Pane 2
verschiebbar
Pane 3
verschiebbar
Vertikal – untere Pane fixiert
Obere Pane
verschiebbar
Untere Pane – Fixed
Größe gesperrt

Verschachtelt – Visual Studio Layout

Äußerer V-Splitter (oben/unten), innerer H-Splitter (links/mitte/rechts). Alle Panes sind collapsible.

Sidebar
Links
Editor / Hauptinhalt
Mitte – flex
Properties
Rechts
Output / Terminal
Unten

Real-Life Demo – Projektmanager

Vollständiges 3-Zonen-Layout: Navigationsbaum links (collapsible), Hauptbereich mit Tabs und Formular in der Mitte, Properties-Panel rechts (collapsible). Unten ein Log-Panel (collapsible).

Projektstruktur
Projekt-Details
Gesamt7
Erledigt2
Offen5
OUTPUT
Build 3 Warnings
Build started...
Restoring NuGet packages...
Restore complete (1.2s)
Onesown.Blazor.Components -> bin/Release/net10.0/...
warning CS8600: Converting null literal to non-nullable type.
warning CS8604: Possible null reference argument.
warning CS8618: Non-nullable property not initialized.
Onesown.Blazor.Components.Web -> bin/Release/net10.0/...
Build succeeded.
3 Warning(s)
0 Error(s)
Time elapsed: 00:00:04.87

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please retry or reload the page.