App Shell — template.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.
Beispiele
Templates liefern Slot-Regeln statt eigener Demos — siehe Events & Slots.
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
headerTone | string: light | dark | "light" |
Events & Slots
Slot header: akzeptiert component.page-header, component.navigation, component.breadcrumb, ui.*, layout.*
Slot sidebar: akzeptiert component.navigation, component.sidebar, ui.* · Pflicht
Slot main: akzeptiert section.*, layout.*, component.*, ui.* · Pflicht
Slot footer: akzeptiert section.footer, ui.*, layout.*
Stellschrauben (Komponenten-Tokens)
| Token | Default |
|---|---|
--appshell-band-dark | var(--color-band-dark) |
--appshell-band-dark-muted | var(--color-band-dark-muted) |
--appshell-band-dark-text | var(--color-band-dark-text) |
--appshell-border-default | var(--color-border-default) |
--appshell-surface-default | var(--color-surface-default) |
--appshell-surface-page | var(--color-surface-page) |
--appshell-text-default | var(--color-text-default) |
Genutzte Design-Tokens
border.hairline color.band.dark color.band.dark-muted color.band.dark-text color.border.default color.surface.default color.surface.page color.text.default size.10 size.3 size.4 size.5 size.6 size.8