On this page

Tabs

Die Tabs-Komponente zeigt zusammengehörige Inhalte in mehreren Ansichten an. Sie bietet eine zugängliche und interaktive Möglichkeit, Inhalte in Tab-Abschnitte zu gliedern.

Grundlegende Verwendung

Die einfachste Variante besteht aus einer Tabs-Komponente mit einem defaultValue, einer TabsList mit TabsTrigger-Komponenten und den zugehörigen TabsContent-Komponenten.

<Tabs defaultValue="light">
  <TabsList>
    <TabsTrigger value="light">Hell</TabsTrigger>
    <TabsTrigger value="dark">Dunkel</TabsTrigger>
    <TabsTrigger value="system">System</TabsTrigger>
  </TabsList>
  <TabsContent value="light">
    Das helle Theme verwendet einen weißen Hintergrund mit dunklem Text für optimale Lesbarkeit in hellen Umgebungen.
  </TabsContent>
  <TabsContent value="dark">
    Das dunkle Theme verwendet einen dunklen Hintergrund mit hellem Text, um die Augen bei schwachem Licht zu schonen.
  </TabsContent>
  <TabsContent value="system">
    Das System-Theme passt sich automatisch an die Darstellungseinstellungen deines Betriebssystems an.
  </TabsContent>
</Tabs>

Synchronisierte Tabs

Verwende die syncKey-Prop, um mehrere Tab-Gruppen zu synchronisieren. Wenn ein Tab in einer Gruppe ausgewählt wird, wechseln alle anderen Gruppen mit demselben syncKey automatisch zum gleichen Wert. Das ist nützlich, um zusammengehörige Inhalte über verschiedene Abschnitte hinweg zu zeigen.

Der aktuell ausgewählte syncKey wird im Local Storage gespeichert und bleibt so über Sitzungen und Seiten hinweg erhalten.

Drücke Win + R, um den Ausführen-Dialog zu öffnen

Drücke Cmd + Space, um Spotlight zu öffnen

Drücke Alt + F2, um den Ausführen-Dialog zu öffnen

<Tabs defaultValue="windows" syncKey="os">
  <TabsList>
    <TabsTrigger value="windows">Windows</TabsTrigger>
    <TabsTrigger value="macos">macOS</TabsTrigger>
    <TabsTrigger value="linux">Linux</TabsTrigger>
  </TabsList>
  <TabsContent value="windows">
    Drücke `Win + R`, um den Ausführen-Dialog zu öffnen
  </TabsContent>
  <TabsContent value="macos">
    Drücke `Cmd + Space`, um Spotlight zu öffnen
  </TabsContent>
  <TabsContent value="linux">
    Drücke `Alt + F2`, um den Ausführen-Dialog zu öffnen
  </TabsContent>
</Tabs>

<Tabs defaultValue="windows" syncKey="os">
  <TabsList>
    <TabsTrigger value="windows">Windows</TabsTrigger>
    <TabsTrigger value="macos">macOS</TabsTrigger>
    <TabsTrigger value="linux">Linux</TabsTrigger>
  </TabsList>
  <TabsContent value="windows">
    Das Terminal heißt „Eingabeaufforderung" oder „PowerShell"
  </TabsContent>
  <TabsContent value="macos">
    Das Terminal heißt „Terminal.app"
  </TabsContent>
  <TabsContent value="linux">
    Das Terminal hängt von deiner Distribution ab
  </TabsContent>
</Tabs>

Props

Tabs-Komponente

Die Hauptcontainer-Komponente, die alle Tab-bezogenen Komponenten umschließt.

Prop	Typ	Erforderlich	Beschreibung
`defaultValue`	`string`	Ja	Der anfangs aktive Tab-Wert
`syncKey`	`string`	Nein	Optionaler Schlüssel zur Synchronisierung mehrerer Tab-Gruppen
`class`	`string`	Nein	Zusätzliche CSS-Klassen

TabsList-Komponente

Der Container für die Tab-Trigger, der die Tab-Navigationsleiste bereitstellt.

Prop	Typ	Erforderlich	Beschreibung
`class`	`string`	Nein	Zusätzliche CSS-Klassen

TabsTrigger-Komponente

Der klickbare Tab-Button, der den zugehörigen Inhalt aktiviert.

Prop	Typ	Erforderlich	Beschreibung
`value`	`string`	Ja	Eindeutige Kennung, die zu einem TabsContent-Wert passt
`class`	`string`	Nein	Zusätzliche CSS-Klassen

TabsContent-Komponente

Der Container für den Inhalt, der zu jedem Tab gehört.

Prop	Typ	Erforderlich	Beschreibung
`value`	`string`	Ja	Eindeutige Kennung, die zu einem TabsTrigger-Wert passt
`class`	`string`	Nein	Zusätzliche CSS-Klassen

Funktionen

Tab-Synchronisierung

<Tabs defaultValue="tab1" syncKey="shared">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Inhalt 1</TabsContent>
  <TabsContent value="tab2">Inhalt 2</TabsContent>
</Tabs>

Styling

Alle Komponenten akzeptieren eine class-Prop für individuelles Styling. Standardmäßig verwenden die Komponenten Tailwind-CSS-Klassen, die sich über die class:list-Direktive anpassen lassen:

<TabsList class="my-custom-tabs">
  <TabsTrigger class="custom-trigger">Tab 1</TabsTrigger>
</TabsList>

Barrierefreiheit

Die Tabs-Komponente folgt den WAI-ARIA-Richtlinien für Tabs:

TabsList hat role="tablist"
TabsTrigger hat role="tab" und passende aria-selected-Zustände
TabsContent hat role="tabpanel"
Tastaturnavigation wird unterstützt