Seitenleiste (Sidebar) — component.sidebar
App-Seitenleiste (Untitled-UI-Muster): Marke, gruppierte Nav-Einträge mit Icons + Badges, Fußbereich mit Nutzer — einklappbar (Controller), aktiver Eintrag hervorgehoben
Componentv1.2.0Navigationweb.applicationdesktop.shellbuilder.preview
Beispiele
App-Sidebar mit Gruppen, Icons, Badge und Nutzer-Fuß (Klapp-Knopf oben rechts)
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
brand | string | "" |
groups * | array | — |
userName | string | "" |
userInfo | string | "" |
collapsible | boolean | true |
Events & Slots
Events: navigate
Stellschrauben (Komponenten-Tokens)
| Token | Default |
|---|---|
--sidebar-border-default | var(--color-border-default) |
--sidebar-radius-control | var(--radius-control) |
--sidebar-surface-default | var(--color-surface-default) |
--sidebar-surface-sunken | var(--color-surface-sunken) |
--sidebar-text-default | var(--color-text-default) |
--sidebar-text-muted | var(--color-text-muted) |
--sidebar-active-marker | var(--color-action-primary) |
Genutzte Design-Tokens
border.emphasis border.hairline color.action.primary color.border.default color.surface.default color.surface.sunken color.text.default color.text.muted duration.fast easing.standard font.family.default radius.control shadow.overlay-large size.16 size.2 size.3 size.32 size.4 size.8 text.lg text.md text.sm text.xs tracking.wide weight.bold weight.medium weight.semibold