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.
(Default) Medium, Full | |
(Default) False, True | |
(Default) Medium, Small, Large, None | |
(Default) Strong, Weak, Invisible, No Backdrop | |
(Default) Right, Left, Up, Down |
Size
Die Size-Property bestimmt die physikalische Größe des Drawer-Fensters. Es kann zwischen Medium (Standardgröße mit einem fixen Abstand zum Seitenrand) und Full gewählt werden.
Rounded
Die Rounded-Property legt fest, ob die Ecken des Drawers abgerundet sind oder nicht. Der Standardwert ist True, was abgerundete Ecken bedeutet. Bei False sind die Ecken scharfkantig.
Spacing
Die Spacing-Property gibt an, wie groß der Innenabstand des Drawers zum Content ist. Zur Auswahl stehen die Optionen Medium (Standard), Small, Large und None.
Backdrop
Die Backdrop-Property bestimmt, ob der Hintergrund des Drawers abgedunkelt wird oder nicht. Zur Verfügung stehen die Varianten Strong (starke Abdunkelung), Weak (schwache Abdunkelung), Invisible (kein Abdunkeln, aber mit der Funktionalität eines Backdrops) und No Backdrop (kein Abdunkeln und keine Interaktion mit dem Hintergrund).
Direction
Die Direction-Property gibt an, aus welcher Richtung sich der Drawer öffnet und schließt. Der Standardwert ist Right, was bedeutet, dass der Drawer von rechts erscheint. Es sind auch die Optionen Left, Up und Down verfügbar.
Boxmodel
Das Boxmodel definiert den Aufbau einer Komponente. Es nutzt die unten genannten Tokens, um Konsistenz und Skalierbarkeit zu gewährleisten.
Token
(Default) Medium | Small | Large | |
|---|---|---|---|
Padding-V | db-spacing-fixed-sm | db-spacing-fixed-xs | db-spacing-fixed-md |
Padding-H | db-spacing-fixed-lg | db-spacing-fixed-md | db-spacing-fixed-xl |
Spacing | db-spacing-fixed-xl | db-spacing-fixed-xl | db-spacing-fixed-xl |
Border Radius | db-border-radius-sm | db-border-radius-sm | db-border-radius-sm |
Elevation | db-elevation-enabled | db-elevation-enabled | db-elevation-enabled |
Kurz, Knackig, Klar
Setze die Drawer Komponente ein, um
- weitere, detaillierte Informationen anzuzeigen
- das Ausfüllen von optionalen, einfachen Formulare zu ermöglichen
- vertiefte Navigationsoptionen bereitzustellen
- In Layouts mit begrenztem Platz zusätzliche Funktionen zugänglich zu machen
Guidelines to Go
- Einsatz und Content
- Zusätzliche weiterführende Informationen die keine kritischen Inhalte oder Aktionen erfordern
- Ausschließlich optionale, einfache Formulareingaben (keine komplexen Prozesse)
- Placement über der gesamten Seitenbreite und -höhe
- Immer Optionen zum Einklappen des Drawers ermöglichen
Einsatz
Der Drawer zeigt zusätzliche Informationen oder interaktive Inhalte in einem aufklappbaren Bereich an, sodass Inhalte effizient eingesehen oder bearbeitet werden können, ohne die Hauptseite zu verlassen. Dadurch bleibt der Kontext erhalten und die Benutzererfahrung wird optimiert. Typische Anwendungen sind seitliche Navigationsmenüs, Detailansichten oder einfache Formulare.
🟢 Verwende den Drawer für kontextbezogene Inhalte, die zusätzliche Details bieten, ohne die Hauptseite zu verlassen.🔴 Vermeide den Drawer für wichtige oder kritische Informationen, die ständig im Blickfeld bleiben müssen.
Inhalte
Der Drawer bietet einen leicht zugänglichen Bereich für Benutzerinformationen oder interaktive Elemente. Um eine optimale Benutzererfahrung zu gewährleisten, sollte der Inhalt klar strukturiert und einfach zu verstehen sein.
🟢 Achte darauf, dass der Inhalt des Drawers gut organisiert und verständlich ist, um die Navigation zu erleichtern.🔴 Vermeide es, den Drawer für langandauernde Aktionen oder Prozesse zu nutzen, die einen vollständigen Seitenwechsel oder eine eigene Seite erfordern.
Platzierung
Unabhängig davon, von welcher Seite der Drawer eingeblendet wird, nimmt er immer die gesamte Breite und Höhe der Seite ein. Diese ganzflächige Einblendung ermöglicht es dem Drawer, den richtigen Grad an Aufmerksamkeit zu erhalten.
🟢 Die Einblendung der Drawers überlagert immer die gesamte Seitenbreite und -höhe inklusive des Headers.🔴 Vermeide es den Drawer nur über einem bestimmten Seitenbereich zu platzieren.
Schließen des Drawers
Da der Drawer zusätzliche Inhalte in einem ausklappbaren Bereich anzeigt, muss den Nutzer:innen die Möglichkeit zum Schließen des Bereichs geboten werden. Das ist per Klick auf den Seitenbereich möglich, sollte zur Gewährleistung der Tastatursteuerung aber zusätzlich durch einen Close-Button im Drawer Header ermöglicht werden. Bei der “No Backdrop” Variante ist ein Button zum Schließen unbedingt erforderlich, da hierbei per Klick auf den Seitenbereich der Drawer nicht eingeklappt wird.
🟢 Ermögliche immer eine Option zum Einklappen/Schließen des Drawers.
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