Generic Filter Filter

Die generic_filter Komponente zeigt eine Filterleiste mit mehreren Dropdown-Menüs an. Bei einer Änderung der Filter werden die Ergebnisse automatisch über HTMX aktualisiert.

For more complex filtering needs, consider the Query Builder component.

WCAG AA
HTMX

Funktionen

  • -

  • HTMX-Integration: Die Ergebnisse werden bei einer Filteränderung automatisch aktualisiert.

  • Anordnungsoptionen: Horizontale oder vertikale Anordnung.

  • Tooltips: Optionaler Erklärungstext für jeden Filter.

HTML

Verwendung

Die Komponente wird über das generic_filter Tag eingebunden.

{% load insight_tags %} {% generic_filter config=generic_filter_config %}

Parameter

Laden…

config (GenericFilterConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
filters

Liste der Filterkonfigurationen.

 [] False
request_url str

URL für den Formular-Request. Nicht zusammen mit htmx_config verwenden; stattdessen htmx_config.request_url für HTMX-Anfragen verwenden.

 "" False
vertical bool

Wenn „True“, werden die Filter vertikal angeordnet.

 False False
htmx_config

HTMX-Konfiguration für AJAX-Anfragen.

 None False
GenericFilterConfig( filters=[ FilterConfig( name="status", label="Status", options={"": "All", "active": "Active", "inactive": "Inactive"}, ), FilterConfig( name="category", label="Category", options={"": "All", "tech": "Technology", "science": "Science"}, ), ], htmx_config=HtmxConfig(target="#results", swap_method="innerHTML"), )

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Das Formularelement verfügt über die Eigenschaft role='search' für die Orientierungsnavigation.

  • Filterfelder verwenden die select-Komponente mit den entsprechenden Beschriftungszuordnungen.

Verwandte Themen