Backdrop
Der Backdrop ist eine Hilfskomponente, die eine abgedunkelte Ebene hinzufügt, um bestimmte Inhalte hervorzuheben oder Zustände anzuzeigen, wie z. B. Modals, Dialoge oder Overlays. Im Design ist er als eigenständige Komponente verfügbar, während er in der Entwicklung als CSS-Stil implementiert ist.
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.
Emphasis
Die Emphasis-Property steuert die visuelle Hervorhebung, die der Backdrop erreicht. Es stehen die Varianten Weak (Standard) und Strong zur Auswahl. Weak eignet sich für weniger auffällige Abdunklung des Hintergrunds, während Strong verwendet wird, um den Hintergrund hinter dem Backdrop stärker abzudunkeln.
Kurz, Knackig, Klar
Setze die Backdrop-Komponente ein, wenn du
- bestimmte Inhalte visuell hervorheben möchtest, z. B. Modals, Dialoge oder Overlays.
- den Fokus von der darunterliegenden Ebene ablenken und die Aufmerksamkeit der Nutzer auf ein wichtiges Element lenken möchtest.
- eine visuelle Trennung zwischen den aktiven Inhalten und der Hintergrundebene herstellen möchtest.
Guidelines to Go
- klar und prägnante Texte verwenden
- Richtige semantische Variante für Kontext verwenden
- Einsatz in Data-Inputs bei Validierung
- Nicht für Beispielbefüllung von Data-Inputs verwenden (➔ Placeholder Text).
- Einsatz ohne Icon nur in Ausnahmefällen ➔ auf sinnvollen Text achten
Abdunklungsstufen
Nutze die schwache Stufe (weak) für leichtere Hervorhebungen, bei denen der Hintergrund visuell erkennbar bleiben soll, z. B.:
- Bei Drawers oder Overlays, die den Hintergrund nur minimal abdunkeln sollen.
- Wenn der Hauptfokus nicht zu stark abgelenkt werden soll (z. B. bei optionalen UI-Aktionen).
Verwende die starke Stufe (strong), wenn der Hintergrund weniger sichtbar sein soll, um den Fokus stärker auf den Vordergrund zu lenken, z. B.:
- Bei Drawers, Overlays oder kritischen Aktionen, die die volle Aufmerksamkeit der Nutzer erfordern.
- In Ladezuständen, bei denen der Nutzer keine Hintergrundelemente sehen oder bedienen soll.
- Für komplexe Dialoge, deren Inhalte vollständig im Vordergrund stehen.
Weak ist ideal für Overlays mit sichtbarem Hintergrund. Strong reduziert dessen Sichtbarkeit für stärkeren Fokus.
Verwendung im Layout
Verwende die Backdrop-Komponente im Kontext anderer Komponenten in folgenden Szenarien:
- Drawer: Für Overlays, die nicht den gesamten Bildschirm einnehmen, aber den Hintergrund dezent abdunkeln.
- Modal Dialog: Um die darunterliegenden Inhalte auszublenden und den Fokus auf den Dialog zu lenken.
- Loading-States: Zur Anzeige von Ladezuständen, wenn der Nutzer nicht mit der darunterliegenden Oberfläche interagieren soll.
Setze die Backdrop-Komponente immer im Kontext mit anderen Komponenten, wie im Drawer oder dem Modal ein, die einen visuellen Fokus erhalten sollen.
- Setze die Backdrop-Komponente nicht ein, wenn keine klare Notwendigkeit besteht, den Hintergrund abzudunkeln (z. B. bei unkritischen Aktionen wie einem einfachen Tooltip).
- Verwende die Backdrop-Komponente nicht alleinstehend, ohne ein überlagertes Element wie ein Modal, einen Drawer oder eine wichtige Aktion, die den Fokus verlangt.
- Die Backdrop-Komponente ist kein dekoratives Element, sondern soll interaktive Zustände unterstützen. Verwende sie also nicht dauerhaft als Designelement.
🔴 Vermeide unnötige Überlagerung, wenn keine klare Notwendigkeit besteht, den Hintergrund abzudunkeln.🔴 Verwende die Backdrop-Komponente nicht alleinstehend, ohne ein überlagertes Element, das den Fokus verlangt.🔴 Verwende den Backdrop nicht als dauerhaftes Designelement.
Accessibility
Kontrast sicherstellen
Setze den Content auf den Backdrops immer auf einer Fläche, die genügend Kontrast zum Backdrop herstellt, z.B. eine Card, den Drawer (in dieser Komponente ist der Backdrop bereits enthalten).
Hintergrundinteraktion vermeiden
Nutze die Backdrop-Komponente nicht, wenn der Hintergrund weiterhin interaktiv sein muss (z. B. bei Dropdown-Menüs oder Formularfeldern). Dies führt zu hinderlichen Zuständen für Tastatur-Nutzer und Screenreader-Nutzer, da der Fokus auf verdeckte, nicht zugängliche Inhalte gelenkt werden kann.
🔴 Inhalte auf Backdrops immer mit ausreichend Kontrast, z. B. auf einer Card oder in einem Drawer, platzieren.🔴 Verwende Backdrops nicht, wenn der Hintergrund weiterhin interaktiv bleibt.
Hey du! Schön, dass du hier bist. Leider sind die Informationen, die du gerade suchst, noch nicht verfügbar. Aber keine Sorge, wir arbeiten bereits daran, diese Seite mit allen wichtigen Details zu füllen. Komme gerne etwas später wieder vorbei!🙂
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