Teilbare Fläche (Split-Panes) — component.resizable
Zwei Bereiche mit ziehbarem Teiler (horizontal oder vertikal) — Maus/Touch per Pointer-Capture, Tastatur mit Pfeiltasten, Grenzen über min/max
Componentv1.0.0Desktopweb.applicationdesktop.shell
Beispiele
Nebeneinander (Teiler ziehen oder fokussieren + Pfeiltasten)
Navigation / Baum
Inhalt — der erste Bereich startet bei 35 % (Grenzen 20–80 %).
Übereinander (vertical)
Editor
Konsole / Vorschau
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
orientation | string: horizontal | vertical | "horizontal" |
initial | number | 50 |
min | number | 20 |
max | number | 80 |
height | string | "" |
Events & Slots
Events: resize
Slot start: akzeptiert ui.*, component.*, layout.* · Pflicht
Slot end: akzeptiert ui.*, component.*, layout.* · Pflicht
Stellschrauben (Komponenten-Tokens)
| Token | Default |
|---|---|
--resizable-divider | var(--color-border-default) |
--resizable-divider-active | var(--color-action-primary) |
Genutzte Design-Tokens
border.emphasis border.hairline color.action.primary color.border.default color.border.subtle duration.fast easing.standard font.family.default radius.full radius.surface size.3 size.8