Version:
Tabs
Tabs werden verwendet, um schnell zwischen verschiedenen Ansichten innerhalb eines Kontexts zu wechseln.
Overview
Intro
Tabs werden verwendet, um schnell zwischen verschiedenen Ansichten innerhalb eines Kontexts zu wechseln und verschaffen dem Nutzer einen Überblick über die verfügbaren Ansichten.
Die Tabs werden an der gleichen Stelle wie die Navigationsleiste platziert.
broken_image
Verwendung
| 👍 Do | 👎 Don't |
|---|---|
| ... wenn zwischen verschieden Ansichten, die nicht in einem linearen Prozess zusammenhängen, navigiert werden soll. | ... wenn zwischen den Abschnitten einer Seite navigiert werden soll (hierzu die Ankernavigation verwenden). ... wenn zwischen Seiten navigiert werden soll, die in einem linearen Prozess zusammenhängen (hierzu die Prozessnavigation verwenden). |
Guidelines
Aufbau
Die Tabs sind eine Leiste, die die gesamte verfügbare Breite einnimmt. Jeder Tab hat einen Namen. Die Breite der Tabs passt sich an die Breite des Namenstextes an. Der Text ist vertikal und horizontal im Tab zentriert.
Varianten/Typen
Standard
Verwende die Standard Variante, wenn der Inhalt unter den Tabs dargestellt werden soll, was der Normalfall sein sollte.
Tabs Variante Standard
Bottom
Verwenden die Bottom-Variante, wenn der Inhalt über den Tabs dargestellt werden soll, wie z.B im Widget.
broken_image
Tabs Variante Bottom
Verhalten
Die Tabs befinden sich an der gleichen Stelle wie die Navigationsleiste und zeigen den Namen aller verfügbaren Seiten nebeneinander an. Wenn ein Reiter ausgewählt wird, wird die zugehörige Seite angezeigt und der aktive Tab farblich hervorgehoben. Es ist immer mindestens ein Tab ausgewählt.
Overflow Verhalten
Wenn nicht genügend Platz in der Breite vorhanden ist, um alle Tabs nebeneinander anzuzeigen, erscheinen auf der linken und rechten Seite der Tableiste Pfeile, mit denen nach links und rechts gescrollt werden kann.
broken_image
Tabs Overflow Verhalten
States
Klickbar (nicht ausgewählt)
Ein klickbarer, aber nicht angewählter Tab wird ohne Hervorhebung dargestellt.
Aktiv
Der jeweils aktive/sichtbare Tab wird hervorgehoben.
Barrierefreiheit
Tastaturbedienung
Über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") ist die Tableiste fokussierbar. Einzelne Tabs lassen sich dann mit den Pfeiltasten ansteuern.
Ist ein Tab oder ein Pfeilbutton im Fokus, kann dieser mittels Wagenrückholtaste ("Return"), Eingabetaste ("Enter") und auch per Leerzeichentaste ("Space") ausgewählt werden.