Layout & Struktur
Die Architektur deines digitalen Raums.
Komposition
Das Layout ist die Grammatik der Oberfläche.
VBox und HBox sind bewusst einfach gehalten. Sie erzwingen keine externe Abstraktion, sondern machen die räumliche Struktur direkt im Template sichtbar.
VBox
Vertikale Anordnung für Formulare, Panels und Seiten.
HBox
Horizontale Gruppen für Toolbars, Aktionen und kurze Zeilen.
Div
Neutraler Raum für semantische oder visuelle Spezialisierung.
Skizze der App-Hülle
Ein dichteres Layout zeigt, wie Navigation, Inhalt und Detailbereiche aus wenigen Bausteinen entstehen.
Scala JS UI 1.0
Komponenten
Formulare
Daten
Showcase-Oberfläche
Die Navigation führt von links, während rechts Raum für die aktive Komponente und ihre Erklärung bleibt.
Live-Demo
API
Hinweise
Elegantes Box-Layout
Die Kernidee bleibt klein und gut lesbar: Container verschachteln, Abstände setzen, Inhalte platzieren.
Navigation
Toolbar
Inhalt
Inspektor
Lesbarkeit
Die Struktur liest sich von außen nach innen
Zuerst kommt die Seite, dann der Bereich und schließlich die konkrete Zeile oder Spalte.
Stabilität
Abstände gehören zu Containern
Gap und Padding beschreiben den Raum, nicht jedes einzelne Kindelement.
Erweiterung
Neue Bereiche bleiben lokal
Ein später hinzugefügtes Panel fügt sich als weiterer Container ein, ohne bestehende Elemente umzuformen.
Verwendung von VBox & HBox
Die Layout-DSL bleibt nah am gedanklichen Modell einer UI-Skizze.
scala
vbox {
style { gap = "10px" }
hbox {
div { text("Left") {} }
div { text("Right") {} }
}
}