Ein Stack ist eine minimierte Liste, in der jeweils nur ein Inhaltselement in einer gestapelten visuellen Darstellung angezeigt wird, z. B. eine Benachrichtigung oder eine Karte.
Grundsätze
Stacks sind Containerkomponenten und teilen daher Designgrundsätze mit Karten und Listen:
Einschließung: Stacks gruppieren zusammengehörige Informationen und Aktionen zu einer einzelnen, leicht verständlichen Einheit.
Fokus und Klarheit: Sie präsentieren Inhalte auf klare und fokussierte Weise.
Vielseitigkeit: In Stacks können Karten und Benachrichtigungen angezeigt werden.
Einheitliche Darstellung: Stacks folgen einer einheitlichen visuellen Struktur.
Verwendung und Platzierung
Mit Stacks können Sie Nutzern zeigen, dass in einer Liste mehrere Elemente minimiert sind, während die Anzahl der sichtbaren visuellen Elemente minimiert wird. Es gibt zwei verschiedene Varianten von Stacks:
Karten-Stacks
Benachrichtigungs-Stacks
Stacks sind Containerkomponenten. Beide Versionen verhalten sich und sehen gleich aus.
Beide sollten nahezu identisch aussehen und sich gleich verhalten. Der Stack ist ein Container für diese Steuerelemente mit integrierter Logik für die Seitennummerierung.
Stack-Navigation
Nutzer können vorwärts und rückwärts navigieren, indem sie auf dem Touchpad wischen oder ziehen. Wenn Sie durch den Stack scrollen, wird jeweils nur ein Element durchlaufen.
Stacks können jeweils nur ein Element durchlaufen.
Bei einer Touch-Eingabe können Stacks jeweils ein Element präsentieren, indem sie sich vertikal bewegen. Sie werden zu Listen, um mehr als ein Element gleichzeitig anzuzeigen. In der Liste sollten Standardcontainer und Fokusstatus verwendet werden.
Tiefe verwenden, um den Fokus anzugeben
Für die unteren Stack-Elemente wird eine Tiefe von 0 verwendet, während das oberste Element eine Tiefe von +2 hat.
Anatomie
Ein Stack wird immer als Seitennummerierungskomponente minimiert. Das oberste Element ist immer der primäre Fokus und hat eine stärkere Rahmentiefe, es sei denn, es ist eine verschachtelte aktivierte Schaltfläche vorhanden.
Wenn Sie über den Anfang oder das Ende eines Stacks wischen, wird die Standard-Stretch-Animation angezeigt, die den Anfang oder das Ende eines Stacks hervorhebt.
Anpassung
Stacks haben integrierte Scrims, Seitennummerierung und Animationen, die nicht angepasst werden können. Stattdessen werden die Inhalte in den Stacks angepasst.
Das sollten Sie tun
