Properties
Properties definieren die Eigenschaften und verschiedenen Ausprägungen einer Komponente. Sie ermöglichen, die Komponente flexibel an unterschiedliche Anforderungen anzupassen. Da Properties in Design und Entwicklung identisch sind, wird die Übergabe vereinfacht und die Konsistenz sichergestellt.
Variant
Das Accordion ist in folgenden zwei Varianten einsetzbar:
- Divider: Bei dieser Variante wird das Accordion Item zusammen mit einem Divider dargestellt, der visuell die Trennung zwischen den einzelnen Accordion Items innerhalb des Accordion kennzeichnet.
- Card: Hier wird das Accordion Item und der Content auf eine Card gesetzt, die eine visuell abgegrenzte Einheit bildet.
Behaviour
Das Multiple-Verhalten des Accordion erlaubt das gleichzeitige Öffnen mehrerer Accordion Items, um mehrere Content-Bereiche anzuzeigen. Im Single-Verhalten kann nur ein Accordion Item zur gleichen Zeit geöffnet sein. Das Öffnen eines neuen Accordions führt automatisch zum Schließen der anderen Items.
Accordion Item
Das Accordion Item ist ein interaktives Element innerhalb des Accordions, das ermöglicht, Content kompakt zu organisieren und bei Bedarf auf- oder zuzuklappen. Das Accordion Item sollte nicht als eigenständige Komponente genutzt werden.
Properties
Disabled
Die Disabled-Property legt fest, ob das Accordion Item aktiv oder inaktiv ist. Bei Disabled = False ist das Item interaktiv und unterstützt Zustände wie Hovered, Pressed und Focused. Wenn Disabled = True gesetzt ist, wird das Item inaktiv und zeigt keine interaktiven Zustände mehr. In diesem Fall ist es nicht klickbar.
Open
Die Open-Property legt fest in welchem Zustand sich das Accordion Item befindet. Bei Open = False wird nur die Headline angezeigt, während bei Open = True die Headline und der ausgeklappte Content Bereich angezeigt werden. Das Chevron gibt dabei an, in welchem Zustand sich das Accordion Item befindet.
Boxmodel
Das Boxmodel definiert den Aufbau einer Komponente. Es nutzt die unten genannten Tokens, um Konsistenz und Skalierbarkeit zu gewährleisten.
Accordion Item
Token
Accordion Item
Padding-Full | db-spacing-fixed-md |
| Padding-V1 | db-spacing-fixed-md |
Padding-V2 | db-spacing-fixed-lg |
Padding-H | db-spacing-fixed-md |
Spacing | db-spacing-fixed-md |
Border Radius | db-border-radius-sm |
Icon Size | db-base-icon-font-size-md |
Text Size | db-type-body-md-regular |
Kurz, Knackig, Klar
Setze die Accordion-Komponente ein, wenn
- bei umfangreichen Inhalten, z. B. FAQs.
- wenn Nutzer optionale Informationen gezielt öffnen sollen.
- zur Platzersparnis bei vielen Sektionen.
Guidelines to Go
- Wenn alle Inhalte gleichzeitig sichtbar sein müssen.
- Bei wenigen oder kurzen Inhalten, wo eine einfache Liste besser passt.
Varianten
Lege dich für eine Variante innerhalb deiner Anwendung oder Website fest.
🟢 Nutze innerhalb eines Accordions immer die gleiche Accordion Item Variante.🔴 Vermische keine Accordion Item Varianten innerhalb eines Accordions.
Verschachtelung
Verschachtel keine Accordions. Strukturiere den Inhalt sinnvoll und vermeide komplexe Accordions, die für den Nutzer nicht mehr einfach verständlich sind.
🟢 Strukturiere den Inhalt einfach und verständlich.🔴 Vermeide Verschachtelungen innerhalb eines Accordions.
Headline Texte
Verwende klare und präzise Headline-Labels. Diese sollten bestenfalls kurz und klar verständlich sein und mit dem Inhalt zusammenhängen. Der Nutzer sollte verstehen, was sich hinter der jeweiligen Headline verbirgt.
🟢 Formuliere die Headlines klar und verständlich.🔴 Verwende keine generischen Headlines, die keine Informationen über den verborgenen Inhalt liefern.
Pfeile
Die Chevrons müssen in Richtung Zeigen, in der der Content sich ausfahren wird (collapsed State) oder zusammenfahren wird (open State). Nutze nur die vorgesehenen Chevron (up und down).
🟢 Nutze ausschließlich die vorgesehenen Chevrons (up & down).🔴 Achte darauf, dass die Chevrons nicht in die falsche Richtung zeigen.
Du hast Fragen oder Input?
Wir haben alles dafür gegeben, dass unser Design System mit möglichst wenigen Regeln auskommt. So wird es einfach in der Anwendung, führt zu konsistenten Ergebnissen und stärkt die Marke Deutsche Bahn! Solltest du dir jedoch unsicher sein, Fragen oder einfach nur eine gute Verbesserungsidee haben, so sind wir gerne für dich da!
E-Mail schreiben Feedback in Github
Weiter