Theme: ← Übersicht Tokens

App Shell

App-Seitengeruest: Kopfzeile, Seitenleiste links, Arbeitsbereich, Fusszeile — fuer Desktop-Apps und Web-Applications. Kopf und Fuss sind optional; die Beschreibung versprach sie bis 1.3.0, ohne dass es die Slots gab.

Im Builder nutzen
Templates v1.4.0 Application WebsiteAppDesktop template.app.shell

Beispiele

Templates liefern Slot-Regeln statt HTML — siehe Events & Slots.

Eigenschaften

PropTypDefaultBuilder-Label
headerTonestring: light | dark"light"Ton der Kopfzeile

* Pflicht-Prop

Events & Slots

Slot header: akzeptiert component.page-header, component.navigation, component.breadcrumb, ui.*, layout.*

Slot sidebar: akzeptiert component.navigation, component.sidebar, ui.*

Slot main: akzeptiert section.*, layout.*, component.*, ui.*

Slot footer: akzeptiert section.footer, ui.*, 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.

TokenDefault
--appshell-band-darkvar(--color-band-dark)
--appshell-band-dark-mutedvar(--color-band-dark-muted)
--appshell-band-dark-textvar(--color-band-dark-text)
--appshell-border-defaultvar(--color-border-default)
--appshell-surface-defaultvar(--color-surface-default)
--appshell-surface-pagevar(--color-surface-page)
--appshell-text-defaultvar(--color-text-default)

Genutzte Design-Tokens

border.hairlinecolor.band.darkcolor.band.dark-mutedcolor.band.dark-textcolor.border.defaultcolor.surface.defaultcolor.surface.pagecolor.text.defaultsize.10size.3size.4size.5size.6size.8