Was macht die Komponente?

• Ermöglicht die Filterung einer grossen Anzahl von Informationen.

Wann soll die Komponente eingesetzt werden?

• Zum Einschränken grosser Datenmengen nach ausgewählten Kategorien und Attributen.

Regeln

• Ein Filter hat immer einen Indikator, welcher angibt, dass der Filter aktiv ist und wie viele Ergebnisse in der gefilterten Ansicht dargestellt werden, z.B. 100/500 Einträge.
• Ein Filter kann über unterschiedliche Komponenten verfügen, z.B. Autocomplete, Checkboxen, Chips, Datepicker, Radiobuttons, Selects (Dropdowns), Tags, Freitextfelder, Toggle Buttons.
• Ein Filter muss mit einer Aktion zurückgesetzt werden können (z.B. Button «Filter zurücksetzen»).
• Mehrere Filter-Elemente können ausgewählt oder abgewählt werden.

Zustände

Die Komponente hat folgende Zustände:

• Filtered
• Not Filtered

Varianten

Live Filter

• Der Live Filter enthält die am häufigsten verwendeten Filterkriterien zum Auffinden bestimmter Informationen.
• Beim Verändern eines Filterkriteriums werden die Ergebnisse im Viewport live aktualisiert.

Filter Dialog

• Der Filter Dialog wird mittels eines Buttons oder Links geöffnet.
• Der Filter Dialog enthält eine grosse Anzahl an Filterkriterien zum Auffinden bestimmter Informationen.
• Bei Bedarf können weitere Filterkriterien zum Einblenden im Dialog untergebracht werden, um zusätzliche Filter-Elemente zur Verfügung zu stellen.
• Die Filterung kann mittels «Filtern» (Primary Button) bestätigt oder mittels «Abbrechen» (Secondary Button) abgebrochen werden.
• Die Ergebnisse werden nach der Bestätigung der Filterkriterien im Dialogfenster im Viewport aktualisiert.

Spezifikationen

Design