Teilbare Fläche (Split-Panes)
Zwei Bereiche mit ziehbarem Teiler (horizontal oder vertikal) — Maus/Touch per Pointer-Capture, Tastatur mit Pfeiltasten, Grenzen über min/max
Beispiele
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| orientation | string: horizontal | vertical | "horizontal" | Richtung (horizontal = nebeneinander) |
| initial | number | 50 | Startaufteilung erster Bereich (%) |
| min | number | 20 | Minimum erster Bereich (%) |
| max | number | 80 | Maximum erster Bereich (%) |
| height | string | "" | Feste Höhe (z. B. 320px — Pflicht bei vertical) |
* Pflicht-Prop
Events & Slots
Events:
⚡ resize — im Surface per on: {<event>: {action, params}} verdrahtbar.
Slot start:
akzeptiert ui.*, component.*, layout.*
Slot end:
akzeptiert ui.*, component.*, layout.*
Stellschrauben (Komponenten-Tokens)
Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.
| Token | Default |
|---|---|
--resizable-divider | var(--color-border-default) |
--resizable-divider-active | var(--color-action-primary) |
Genutzte Design-Tokens
LLM-Notizen
component.resizable
Zwei Bereiche mit ziehbarem Teiler (Split-Panes) — Werkzeug-Layouts (Baum + Inhalt, Editor + Vorschau). Maus/Touch per Pointer-Capture, Tastatur über den fokussierbaren Teiler (Pfeiltasten, ±2 %). Event resize {percent}.
Wichtige Props
orientation(horizontal = nebeneinander | vertical),initial/min/max(% des ersten Bereichs),height(geprüfter Längenwert — bei vertical Pflicht, sonst hat der Container keine Höhe).- Slots
start+end. Stellschrauben:--resizable-divider,--resizable-divider-active.
Beispiel-Node
{
"definition": "component.resizable",
"props": { "initial": 30, "height": "400px" },
"slots": { "start": [{ "definition": "component.tree", "props": { "…": "…" } }], "end": [{ "definition": "component.table", "props": { "…": "…" } }] }
}