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 Accordion

Übersicht

Was macht die Komponente?

Dient zur Strukturierung von Content in unterschiedliche Unter-Gruppen.

Wann soll die Komponente eingesetzt werden?

  • Wenn innerhalb des Content klare Untergruppen erstellt werden können.
  • Wenn die Untergruppen für den Benutzer zusätzliche Informationen zum Hauptinhalt bietet.
  • Hauptnutzinhalt des Contents sollte nicht in ein Akkordeon verpackt werden.

Regeln

  • Ein Akkordeon kann 1 bis n Einträge haben.
  • Per Default sind immer alle Akkordeons geschlossen.
  • Der Akkordeon-Header besteht immer aus einem Texttitel.
  • Der Titel darf maximal zweizeilig sein.
  • Icons im Titel sind nicht erlaubt.
  • Die ganze Fläche des Akkordeon-Headers ist klickbar und öffnet/schliesst das Akkordeon.
  • Es können mehrere oder alle Einträge gleichzeitig geöffnet sein. Alternativ kann die Funktion «immer nur ein Akkordeon aufgeklappt» eingesetzt werden.
  • Eine Akkordeon-Komponente innerhalb eines Akkordeon-Eintrags ist nicht erlaubt.
Zustände und Varianten

Zustände

Die Komponente hat folgende Zustände:

  • Collapsed
  • Expanded

Varianten

Standard

Darstellung des

Spezifikationen

DesignCode

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