Schublade (Drawer) — component.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
Beispiele
Slideout von rechts (Button klicken; Escape/Backdrop schließt)
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
openerLabel | string | "Details öffnen" |
title * | string | — |
text | string | "" |
ctaLabel | string | "" |
Events & Slots
Events: activate
Stellschrauben (Komponenten-Tokens)
| 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.hairline color.action.on-primary color.action.on-secondary color.action.primary color.action.primary-hover color.action.secondary color.action.secondary-border color.action.secondary-hover color.border.default color.border.strong color.surface.backdrop color.surface.overlay color.surface.sunken color.text.default color.text.muted duration.fast easing.standard elevation.control elevation.overlay font.family.default layer.modal leading.base radius.control size.2 size.32 size.4 size.5 size.8 text.lg text.md text.sm weight.semibold