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.

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.

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.

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.

Develop Vue ​

Die Implementierung der Webcomponenten in Vue.js kann in folgendem Showcase innerhalb des AKDB Netzwerks betrachtet werden: https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/docs/komponenten-tabs--docs

Develop Flow ​

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter: https://mate-ds-flow-components-showcase-25.core-platform.kubt.akdb.net/?src=component%252Ftabs

Code Examples ​

Install ​

Maven ​

xml
<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-tabs-flow</artifactId>
</dependency>

Import ​

java
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.component.tabs.Tab;

Variants ​

Standard ​

java
Tabs tabs = new Tabs(
    new Tab("First"),
    new Tab("Second"),
    new Tab("Third")
);

Anchor ​

java
Tabs tabs = new Tabs(
    new Tab("First"),
    new Tab("Second"),
    new Tab("Third")
);
tabs.addThemeVariants("anchor");

Stepper ​

java
Tabs tabs = new Tabs(
    new Tab("First"),
    new Tab("Second"),
    new Tab("Third")
);
tabs.addThemeVariants("stepper");

Application bar ​

java
Tabs tabs = new Tabs(
    new Tab(new Icon(MaterialSymbol.SymbolPerson, "Person")),
    new Tab(new Icon(MaterialSymbol.SymbolPerson, "Person")),
    new Tab(new Icon(MaterialSymbol.SymbolPerson, "Person"))
);
tabs.addThemeVariants("application-bar");

Side panel tabs ​

java
Tabs tabs = new Tabs(
    new Tab(new Icon(MaterialSymbol.SymbolPerson, "Person")),
    new Tab(new Icon(MaterialSymbol.SymbolPerson, "Person")),
    new Tab(new Icon(MaterialSymbol.SymbolPerson, "Person"))
);
tabs.addThemeVariants("side-panel-tabs");