Splitter Demo

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

Projektname

Priorität

Deadline

Öffentlich sichtbar

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

SKILL.md – Splitter

---
name: Splitter
description: Onesown Blazor Komponente Splitter (Grouping). Verwende diesen Skill wenn du die Splitter-Komponente verwenden, konfigurieren oder debuggen moechtest.
---

# Splitter

**Namespace:** `Onesown.Blazor.Components`  
**Kategorie:** Grouping  
**Basisklasse:** `IAsyncDisposable`  

Zweiteiliger (oder mehrteiliger) Bereich mit verschiebbarem Trenner zwischen den SplitterPane-Kindkomponenten. Unterstützt horizontale und vertikale Ausrichtung, Größen-Persistenz via localStorage und fixierten Modus.

**Live-Demo:** https://components.schini.com/demo/splitter  

## Parameter

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Orientation`` | ``OoOrientation`` | ``OoOrientation.Horizontal`` | Ausrichtung: Horizontal = Panes nebeneinander (col-resize), Vertical = Panes übereinander (row-resize). |
| ``SaveStateName`` | ``string`` |  | Schlüssel für localStorage. Wird automatisch aus der aktuellen URL + Instanz-Index generiert, wenn nicht angegeben. |
| ``Fixed`` | ``bool`` |  | Sperrt das Verschieben des Splitters. Der Handle wird als einfacher Border ohne Drag-Funktion dargestellt. |
| ``ChildContent`` | ``RenderFragment`` |  | SplitterPane-Kindkomponenten des Splitters. |

## Hinweise

- Grundaufbau: Splitter mit mindestens zwei SplitterPane-Kindkomponenten
- Ausrichtung: Orientation="OoOrientation.Vertical" stapelt Panes übereinander (Standard: Horizontal)
- Größe speichern: SaveStateName="mein-splitter" persistiert die Pane-Größen im localStorage
- Fixierter Modus: Fixed="true" sperrt den Trenner – keine Drag-Interaktion möglich
- Genau eine Pane sollte keinen DefaultSize haben, um den verbleibenden Platz zu füllen
- Aufklappbare Panes: Collapsible="true" am SplitterPane zeigt einen Collapse-Button am Handle