Seitenleiste (Sidebar)
App-Seitenleiste (Untitled-UI-Muster): Marke, gruppierte Nav-Einträge mit Icons + Badges, Fußbereich mit Nutzer — einklappbar (Controller), aktiver Eintrag hervorgehoben
Beispiele
App-Sidebar mit Gruppen, Icons, Badge und Nutzer-Fuß (Klapp-Knopf oben rechts)
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| brand | string | "" | Marke |
| groups * | array | — | Nav-Gruppen |
| userName | string | "" | Nutzer (Fußbereich) |
| userInfo | string | "" | Nutzer-Zusatz (E-Mail/Rolle) |
| collapsible | boolean | true | Einklappbar |
* Pflicht-Prop
Events & Slots
Events:
⚡ navigate — im Surface per on: {<event>: {action, params}} verdrahtbar.
Genutzte Design-Tokens
border.hairlinecolor.border.defaultcolor.surface.defaultcolor.surface.sunkencolor.text.defaultcolor.text.mutedduration.fasteasing.standardfont.family.defaultradius.controlsize.16size.2size.3size.32size.4size.8text.lgtext.mdtext.smtext.xstracking.wideweight.boldweight.mediumweight.semibold
LLM-Notizen
component.sidebar
App-Seitenleiste (nur web.application/desktop.shell): Marke, gruppierte Nav-Einträge mit Icons + Badges, Nutzer-Fuß, einklappbar auf Icon-Breite.
Wann nutzen
- Im
sidebar-Slot vontemplate.app.shell. NICHT auf Websites (Target-Filter blendet sie dort aus).
Wichtige Props
groups=[{title?, items: [{label, href, icon?, badge?, active?}]}]— Icons aus der ui.icon-Whitelist.userName/userInfo(Fußbereich),collapsible,brand.
Beispiel-Node
{
"definition": "component.sidebar",
"props": {
"brand": "tricoma",
"groups": [{"items": [{"label": "Dashboard", "href": "#", "icon": "home", "active": true}]}],
"userName": "D. Selig", "userInfo": "d@tricoma.de"
}
}