Ein Stapel ist eine minimierte Liste, in der jeweils nur ein Inhaltselement in einem gestapelten visuellen Element wie einer Benachrichtigung oder Karte angezeigt wird.
Grundsätze
„Stack“ ist eine Containerkomponente und teilt daher Designprinzipien mit Karten und Listen:
Containment: In Stacks werden verwandte Informationen und Aktionen in einer einzigen, leicht verständlichen Einheit gruppiert.
Fokus und Klarheit: Sie präsentieren Inhalte klar und fokussiert.
Vielseitigkeit: In Stacks können Karten und Benachrichtigungen angezeigt werden.
Einheitliche Darstellung: Die Stacks folgen einer einheitlichen visuellen Struktur.
Nutzung und Platzierung
Mit Stacks können Sie Nutzern zeigen, dass in einer Liste mehrere Elemente minimiert sind, ohne dass zu viele visuelle Elemente zu sehen sind. Es gibt zwei verschiedene Varianten von Stacks:
Kartenstapel
Benachrichtigungsstapel
Stacks sind Containerkomponenten. Beide Versionen verhalten sich nicht unterschiedlich und sehen auch nicht unterschiedlich aus.
Beide sollten nahezu identisch aussehen und sich auch so verhalten. Der Stapel ist einfach ein Container für diese Steuerelemente mit integrierter Logik für die Paginierung.
Die Nutzer navigieren, indem sie auf dem Touchpad vorwärts und rückwärts wischen oder ziehen. Beim Scrollen durch den Stapel wird jeweils nur ein Element angezeigt.
Tiefe verwenden, um den Fokus anzugeben
Für die unteren Stapelpositionen wird eine Tiefe von 0 verwendet, für die oberste Position eine Tiefe von +2.
Stapels können jeweils nur ein Element nach dem anderen durchlaufen werden
Bei Berührung können Stapel jeweils ein Element präsentieren, indem sie sich vertikal bewegen.
Bei Berührung können sich Stapel in Listen verwandeln, um mehr als ein Element gleichzeitig anzuzeigen. Die Liste sollte Standardcontainer und Fokusstatus verwenden.
Anatomie
Ein Stapel wird immer als Paginierungskomponente minimiert. Das oberste Element ist immer der primäre Fokus und hat eine stärkere Rahmentiefe, sofern keine verschachtelte aktivierte Schaltfläche vorhanden ist.
Bumper können das Ende bzw. den Anfang eines Stacks verdeutlichen. Eine Federanimation, die die Liste nach dem Loslassen wieder an ihren Platz zurückschnappen lässt.
Personalisierung
Stacks haben integrierte Scrims, Paging und Animationen, die nicht angepasst werden können. Stattdessen werden die Inhalte in den Stapeln angepasst.