Principes Bases Accessibilité Système de design Guidelines Deutsch Français Italiano English Nos principes de design Centré sur l’utilisateur Reconnaissable Inclusif Minimaliste Holistique Auto-explicatif Axé sur les tâches Approprié Portail de la marque CFF Logo Horloge numérique Droits d’utilisation Couleurs de base Couleurs fonctionnelles Couleurs off-brand Icônes Icônes de l’horaire Pictogrammes À propos de l’accessibilité À propos de ce guide Contact Informations complémentaires Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Conception Développer FAQ Aide Procès Contribution Contact Aperçu Base Composants Overview Releases Design Tokens Composants Aperçu Base Informations Aperçu Base Composants Sens & objectif Community Assets Instructions Power-Apps Bandeaux publicitaires numériques SAP Icônes d’applications Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles Deutsch English 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
Contact

Vous avez des questions ? Vous trouverez peut-être une réponse dans notre FAQ ou notre aide, sinon vous pouvez poser votre question sur le board correspondant sur Github.

Impressum Contact Protection des données Paramètres des cookies