Dropdown-Menü — component.dropdown
Auslöser-Button mit Aktionsmenü — Outside-Click und Escape schließen, select als semantisches Event
Componentv1.1.1Overlayweb.documentweb.applicationdesktop.shell
Beispiele
Aktionsmenü (klickbar)
Primär, rechtsbündig
Mit Icons + Trenner (Zeilen-Aktionen-Muster)
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
label * | string | — |
items * | array | — |
variant | string: secondary | primary | ghost | "secondary" |
align | string: start | end | "start" |
Events & Slots
Events: select, open, close
Stellschrauben (Komponenten-Tokens)
| Token | Default |
|---|---|
--dropdown-action-on-primary | var(--color-action-on-primary) |
--dropdown-action-on-secondary | var(--color-action-on-secondary) |
--dropdown-action-primary | var(--color-action-primary) |
--dropdown-action-primary-hover | var(--color-action-primary-hover) |
--dropdown-action-secondary | var(--color-action-secondary) |
--dropdown-action-secondary-hover | var(--color-action-secondary-hover) |
--dropdown-border-default | var(--color-border-default) |
--dropdown-elevation-overlay | var(--elevation-overlay) |
--dropdown-focus-ring-color | var(--focus-ring-color) |
--dropdown-focus-ring-offset | var(--focus-ring-offset) |
--dropdown-focus-ring-width | var(--focus-ring-width) |
--dropdown-radius-control | var(--radius-control) |
--dropdown-radius-sm | var(--radius-sm) |
--dropdown-status-danger | var(--color-status-danger) |
--dropdown-status-danger-surface | var(--color-status-danger-surface) |
--dropdown-surface-overlay | var(--color-surface-overlay) |
--dropdown-text-default | var(--color-text-default) |
--dropdown-text-link | var(--color-text-link) |
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-hover color.border.default color.border.subtle color.status.danger color.status.danger-surface color.surface.overlay color.text.default color.text.link duration.fast easing.standard elevation.overlay focus.ring-color focus.ring-offset focus.ring-width font.family.default layer.dropdown radius.control radius.sm size.1 size.2 size.3 text.md weight.semibold