Filterleiste — UI-Kit-Galerie

Beispiele

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

Eigenschaften

Prop	Typ	Default	Builder-Label
searchPlaceholder	string	"Suchen …"	Such-Platzhalter
filter	array	[]	Filter

* Pflicht-Prop

Events & Slots

Events: ⚡ filter — 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
`--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.hairlinecolor.action.on-secondarycolor.action.primarycolor.action.secondarycolor.action.secondary-bordercolor.action.secondary-hovercolor.border.defaultcolor.surface.overlaycolor.surface.sunkencolor.text.defaultcolor.text.mutedelevation.controlelevation.overlayfont.family.defaultform.backgroundform.borderform.border-focusform.placeholderlayer.dropdownradius.controlradius.smsize.1size.2size.24size.3size.32text.mdtext.smweight.semibold