Filterleiste — component.filter-bar

Componentv1.0.0Formulareweb.documentweb.applicationdesktop.shellbuilder.preview

Beispiele

Suche + zwei Filter mit Options-Panels (Auswahl markiert den Knopf, Reset erscheint)

Eigenschaften

Prop	Typ	Default
`searchPlaceholder`	string	`"Suchen …"`
`filter`	array	`[]`

Events & Slots

Events: filter

Stellschrauben (Komponenten-Tokens)

Token	Default
`--filter-bar-action-on-secondary`	`var(--color-action-on-secondary)`
`--filter-bar-action-primary`	`var(--color-action-primary)`
`--filter-bar-action-secondary`	`var(--color-action-secondary)`
`--filter-bar-action-secondary-border`	`var(--color-action-secondary-border)`
`--filter-bar-action-secondary-hover`	`var(--color-action-secondary-hover)`
`--filter-bar-border-default`	`var(--color-border-default)`
`--filter-bar-elevation-control`	`var(--elevation-control)`
`--filter-bar-elevation-overlay`	`var(--elevation-overlay)`
`--filter-bar-form-background`	`var(--form-background)`
`--filter-bar-form-border`	`var(--form-border)`
`--filter-bar-form-border-focus`	`var(--form-border-focus)`
`--filter-bar-form-placeholder`	`var(--form-placeholder)`
`--filter-bar-radius-control`	`var(--radius-control)`
`--filter-bar-radius-sm`	`var(--radius-sm)`
`--filter-bar-surface-overlay`	`var(--color-surface-overlay)`
`--filter-bar-surface-sunken`	`var(--color-surface-sunken)`
`--filter-bar-text-default`	`var(--color-text-default)`
`--filter-bar-text-muted`	`var(--color-text-muted)`

Genutzte Design-Tokens

border.hairline color.action.on-secondary color.action.primary color.action.secondary color.action.secondary-border color.action.secondary-hover color.border.default color.surface.overlay color.surface.sunken color.text.default color.text.muted elevation.control elevation.overlay font.family.default form.background form.border form.border-focus form.placeholder layer.dropdown radius.control radius.sm size.1 size.2 size.24 size.3 size.32 text.md text.sm weight.semibold