Darstellung und Verhalten
Varianten
Index
- Der Index besteht aus folgenden Elementen:
- Eingabefeld für die aktuelle Seite.
- Information, wie viele Seiten insgesamt vorhanden sind.
- Zwei Navigationspfeile, um eine Seite vor oder zurück zu navigieren.
- Nutzende können in das Eingabefeld klicken und eine neue Zahl eingeben. Die neu eingegeben Zahl wird bestätigt, wenn die Nutzerin oder der Nutzer das Feld verlässt oder die Enter-Taste drückt.
- Gibt die Nutzerin oder der Nutzer eine Zahl grösser als die letzte Seite an, wird automatisch die letzte Seite in das Eingabefeld geschrieben.
- Gibt die Nutzerin oder der Nutzer eine Null oder eine negative Zahl an, wird die Eingabe automatisch auf 1 gesetzt.
Punkte
- Punkte dienen der Bedienung und Sichtbarmachung von Slider-Elementen.
- Sie verfügen über einen default, onHover und einen aktiv Zustand.
Blättern
- Die Variante Blättern besteht aus folgenden Elementen:
- Aktuelle Seite.
- Information, wie viele Seiten insgesamt vorhanden sind.
- Zwei Navigationspfeile, um eine Seite vor oder zurück zu navigieren.
Verwendung
Index
Wir verwenden den Index zum Blättern durch eine Liste von Elementen oder Seiten mit mehr als 20 Einträgen.
Die Anzahl Elemente pro Seite definieren wir kontextspezifisch.
Punkte
Punkte dienen der Bedienung und Sichtbarmachung von Slider-Elementen. Die Anzahl der Slider-Elemente sind über diese Punkte unterhalb des Containers ersichtlich. Bei Touch-Geräten kann durch Swipen das nächste oder vorhergehende Element angezeigt werden. Ein Klick auf einen der Punkte führt dazu, dass direkt das dahinterliegende Slider-Element angezeigt wird.
Blättern
Wir verwenden das Blättern-Element bei Listen mit mehr als 20 Einträgen. Das Blättern eignet sich vor allem dann, wenn nicht zu viele Seiten vorhanden sind und Nutzende nicht zu einer bestimmten Seite springen müssen.
Die Anzahl Elemente pro Seite definieren wir kontextspezifisch.
Kontakt
Digitale Verwaltung - ZHweb
Ist Ihnen etwas aufgefallen? Fehlt etwas? Möchten Sie etwas beitragen? Melden Sie sich bei uns!