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

Figma

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

Application Bar

Verwende die Variante Application Bar, wenn die Application Bar einer Anwendung umgesetzt wird. Diese Variante wird ausschließlich dort eingesetzt und ist nicht für die Navigation innerhalb einer Seite bestimmt.

Die Variante unterscheidet sich deutlich von der Standard-Variante: Die Tabs werden vertikal untereinander angeordnet, tragen anstelle eines Namens jeweils ein Icon und werden als abgerundete Icon-Flächen dargestellt. Die farbliche Gestaltung folgt den Icon-Farben und nicht der Hervorhebung der Standard-Tabs. Die Namen der Tabs werden stattdessen als Tooltip angezeigt.

Der ausgewählte Tab wird durch eine Hintergrundfläche und eine hervorgehobene Icon-Farbe gekennzeichnet. Reicht der Platz nicht für alle Tabs, gilt das allgemeine Overflow-Verhalten mit Pfeilen - bei vertikaler Anordnung nach oben und unten. Der weiche Übergang an den Rändern der Tableiste wird in dieser Variante nicht verwendet.

Aufbau, Verwendung und Verhalten dieser Variante sind bei der Application Bar beschrieben.

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

Figma

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.