Die verschiedenen Backgrounds werden verwendet, um visuelle Gruppierungen von Komponenten zu erzeugen und hierarchische Zusammenhänge darzustellen.
Verwendung
Eigenschaften
| Name | Type | Default Value | Description |
|---|---|---|---|
type | undefined | undefined | |
style | undefined | undefined |
Beispiele
Primary Background (Standard)
Der Primary Background findet als Standard in jeder Bildschirmansicht Verwendung. Er kann optional mit einem Secondary Background kombiniert werden, sollte im Layout jedoch immer den größeren Anteil einnehmen. Da der Primary Background heller ist als der Secondary Background, kann er für Elemente verwendet werden, die „näher“ am Nutzer liegen. So lassen sich zum Beispiel mit einem Primary Background auf einem Secondary Background Kacheln realisieren.
Primary
Secondary Background
Der Secondary Background kann eingesetzt werden, um Bereiche vom Primary Background abzugrenzen. Damit kann ein Layout sinnvoll unterteilt werden, um eine ordnende Grundstruktur zu erzeugen.
Secondary
Contrast Background
Der Contrast Background kann optional verwendet werden. So ist es möglich, einen Bereich vom Rest des Layouts abzuheben/abzugrenzen. Der Contrast Background sollte sparsam verwendet werden.
Contrast
Floating Background
Der Floating Background wird ausschließlich für Elemente verwendet, die über der normalen Interaktionsebene liegen. Zum Beispiel bei Popups, Popover und Dialogen.
Floating
Besondere Hintergründe
Dimmer
Der Dimmer wird nur eingesetzt, wenn dem Nutzer signalisiert werden soll, dass der Hintergrund temporär nicht benutzbar ist. Dies ist der Fall, wenn z. B. modale Dialoge abgebildet werden. Modale Dialoge sperren den Rest der Anwendung (oder sogar der Benutzeroberfläche), solange der Dialog angezeigt wird.
Dimmed
Do's and Don'ts
Do
Richtige Komponentenversion für jeden Hintergrund
Don't
Falsche Komponentenversionen zum jeweiligen Hintergrund