Prinzipien Grundlagen Barrierefreiheit Design System Guidelines Deutsch Français Italiano English Unsere Gestaltungsprinzipien Nutzerzentriert Wiedererkennbar Inklusiv Reduziert Ganzheitlich Selbsterklärend Aufgabenorientiert Passend SBB Markenportal Logo Digitale Uhr Nutzungsrechte Basis-Farben Funktionale Farben Off-Brand Farben Icons Fahrplan-Icons Piktogramme Über Barrierefreiheit Über diesen Guide Kontakt Weitere Informationen Product Owner User Research Interaction Design Visual Design Development Content Design Testing Was ist ein Design System?​ Designing Coding FAQ Hilfe Prozess Contribution Kontakt Übersicht Basis Komponenten Übersicht Releases Design Tokens Komponenten Übersicht Basis Informationen Übersicht Basis Komponenten Sinn & Zweck Community Assets Anleitung Power-Apps Digitale Werbebanner SAP App Icons Filter

Übersicht

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 und Varianten

Zustände

Die Komponente hat folgende Zustände:

  • Filtered
  • Not Filtered

Varianten

Live Filter

Darstellung eines Beispiels eines Live Filters
  • 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

Darstellung eines Beispiels eines Filter Dialogs
  • 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

Impressum Kontakt Datenschutz Cookie Einstellungen