Schublade (Drawer)
Von rechts einfahrendes Slideout-Panel mit Backdrop (Untitled-UI-Muster): Öffner-Button, Kopf mit Titel + Schließen, Inhalt, Fußleiste — Escape/Backdrop schließen
Nutzt: ui.icon
Beispiele
Slideout von rechts (Button klicken; Escape/Backdrop schließt)
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| openerLabel | string | "Details öffnen" | Öffner-Button |
| title * | string | — | Titel |
| text | string | "" | Inhalt (Text) |
| ctaLabel | string | "" | Fuß-Aktion (Primary) |
* Pflicht-Prop
Events & Slots
Events:
⚡ activate — im Surface per on: {<event>: {action, params}} verdrahtbar.
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.
| Token | Default |
|---|---|
--drawer-action-on-primary | var(--color-action-on-primary) |
--drawer-action-on-secondary | var(--color-action-on-secondary) |
--drawer-action-primary | var(--color-action-primary) |
--drawer-action-primary-hover | var(--color-action-primary-hover) |
--drawer-action-secondary | var(--color-action-secondary) |
--drawer-action-secondary-hover | var(--color-action-secondary-hover) |
--drawer-border-default | var(--color-border-default) |
--drawer-border-strong | var(--color-border-strong) |
--drawer-elevation-control | var(--elevation-control) |
--drawer-elevation-overlay | var(--elevation-overlay) |
--drawer-radius-control | var(--radius-control) |
--drawer-surface-backdrop | var(--color-surface-backdrop) |
--drawer-surface-overlay | var(--color-surface-overlay) |
--drawer-surface-sunken | var(--color-surface-sunken) |
--drawer-text-default | var(--color-text-default) |
--drawer-text-muted | var(--color-text-muted) |
Genutzte Design-Tokens
border.hairlinecolor.action.on-primarycolor.action.on-secondarycolor.action.primarycolor.action.primary-hovercolor.action.secondarycolor.action.secondary-bordercolor.action.secondary-hovercolor.border.defaultcolor.border.strongcolor.surface.backdropcolor.surface.overlaycolor.surface.sunkencolor.text.defaultcolor.text.mutedduration.fasteasing.standardelevation.controlelevation.overlayfont.family.defaultlayer.modalleading.baseradius.controlsize.2size.32size.4size.5size.8text.lgtext.mdtext.smweight.semibold