Version: latest

Universell einsetzbar

Tabs funktioniert sowohl auf dem Server als auch im Browser. Nutze immer den Standard-Import (z. B. @prokodo/ui/tabs) — die Library erkennt die Umgebung automatisch.

Tabs

Tabs rendert eine Tab-Oberfläche mit barrierefreier Tastaturnavigation (Pfeiltasten), animierten Panel-Übergängen und korrekten ARIA-Rollen für tablist/tab/tabpanel.

Übersicht

import { Tabs } from "@prokodo/ui/tabs"
;<Tabs
  id="my-tabs"
  ariaLabel="Dokumentationsabschnitte"
  defaultValue="overview"
  items={[
    { value: "overview", label: "Übersicht", content: <OverviewPanel /> },
    { value: "details", label: "Details", content: <DetailsPanel /> },
    { value: "reviews", label: "Rezensionen", content: <ReviewsPanel /> },
  ]}
/>

Live PreviewOpen in Storybook ↗

Import

import { Tabs } from "@prokodo/ui/tabs"

CSS:

import "@prokodo/ui/tabs.css"

Props

Prop	Typ	Standard	Pflicht	Beschreibung
`id`	`string`	—	✅	Eindeutige ID-Basis für generierte Tab- und Panel-IDs.
`items`	`TabsItem[]`	—	✅	Array von Tab-Definitionen (value, label, content, …).
`color`	`"primary" \| "secondary" \| "success" \| "error" \| "info" \| "warning"`	—	—	Farb-Theme für den Indikator-Gradienten und Hover-Akzent.
`defaultValue`	`string`	erster aktiver	—	Unkontrollierter Anfangswert.
`value`	`string`	—	—	Kontrollierter aktiver Wert.
`onChange`	`(event: TabsChangeEvent) => void`	—	—	Wird aufgerufen, wenn sich der aktive Tab ändert.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	—	Layout-Ausrichtung.
`activationMode`	`"automatic" \| "manual"`	`"automatic"`	—	Ob Pfeiltasten-Navigation den Tab automatisch aktiviert.
`disabled`	`boolean`	—	—	Deaktiviert alle Tab-Interaktionen.
`fullWidth`	`boolean`	—	—	Streckt die Tab-Buttons auf die volle Breite.
`ariaLabel`	`string`	—	—	Barrierefreie Beschriftung der Tabliste.
`badgeChipProps`	`TabsBadgeChipProps`	—	—	Globale Chip-Props für alle Tab-Badges (per Item überschreibbar).
`listClassName`	`string`	—	—	CSS-Klasse am Tab-Listen-Element.
`tabClassName`	`string`	—	—	CSS-Klasse an jedem Tab-Button.
`panelsClassName`	`string`	—	—	CSS-Klasse am Tab-Panels-Container.
`className`	`string`	—	—	CSS-Klasse am Root-Element.

Siehe src/components/tabs/Tabs.model.ts für den vollständigen TabsProps-Typ.

AIC-Hinweis

Verwende im Anwendungscode immer den Standard-Importpfad:

import { Tabs } from "@prokodo/ui/tabs"

Eine separate Auswahl von /client oder /lazy ist im Consumer-Code nicht erforderlich.

AIC-Komponenten unterstützen außerdem ein priority-Flag für kritische Above-the-fold-Elemente. Am sichtbarsten ist das bei Image (natives Preloading via <link rel="preload"> für Above-the-fold-Inhalte).

WCAG-2.2-Status

Kriterium	Bezeichnung	Status	Hinweis
1.3.1	Info und Beziehungen (A)	✅ Erfüllt	Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden.
2.1.1	Tastatur (A)	✅ Erfüllt	Alle Funktionalität muss allein über Tastatur bedienbar sein, ohne Timing-Anforderungen.
2.4.3	Fokusreihenfolge (A)	🔍 Manuell prüfen	Die Tastaturfokus-Reihenfolge muss im vollständigen seitenseitigen Integrationskontext Bedeutung und Bedienbarkeit erhalten.
2.4.7	Fokus sichtbar (AA)	🔍 Manuell prüfen	Auf jedem interaktiven Element muss ein sichtbarer Tastaturfokus-Indikator vorhanden sein. Prüfung gegen das angewendete Produkt-Theme erforderlich.
2.4.11	Fokus nicht verdeckt (Min.) (AA)	🔍 Manuell prüfen	Die fokussierte Komponente darf nicht vollständig durch Sticky-Header, Overlays oder andere positionierte Seitenelemente verdeckt sein.
4.1.2	Name, Rolle, Wert (A)	✅ Erfüllt	Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein.

Testabdeckung: 2 jest-axe-Assertion(s) in 3 Testdatei(en) · 5 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Design Tokens

Tabs lässt sich über CSS Custom Properties an :root oder einem umgebenden Element anpassen.

Token	Standardwert	Beschreibung
`--pk-tabs-border`	`var(--pk-color-border)`	Rahmenfarbe der Tab-Liste (unten / rechts im Vertical-Modus)
`--pk-tabs-tab-color`	`color-mix(in srgb, var(--pk-color-fg) 70%, transparent)`	Standard-Tab-Labelfarbe
`--pk-tabs-tab-hover-color`	`var(--pk-color-brand)`	Hover-Akzentfarbe (tönt den Hover-Hintergrund ein)
`--pk-tabs-tab-hover-bg`	`color-mix(in srgb, var(--pk-tabs-tab-hover-color) 8%, transparent)`	Tab-Hintergrund bei Hover und Fokus
`--pk-tabs-tab-selected-color`	`var(--pk-color-fg)`	Labelfarbe des aktiven Tabs
`--pk-tabs-tab-disabled-color`	`var(--pk-color-muted)`	Labelfarbe des deaktivierten Tabs
`--pk-tabs-badge-bg`	`var(--pk-color-border)`	Hintergrundfarbe der Badge-Pille
`--pk-tabs-badge-fg`	`color-mix(in srgb, var(--pk-color-fg) 70%, transparent)`	Textfarbe der Badge-Pille
`--pk-tabs-indicator-gradient`	`var(--gradient-border-4)`	Gradient für die Indikatorlinie des aktiven Tabs
`--pk-tabs-gap`	`var(--pk-space-lg)`	Abstand im vertikalen Layout-Grid
`--pk-tabs-pad-xs`	`var(--pk-space-xs)`	Horizontales Padding der Badge-Pille
`--pk-tabs-pad-sm`	`var(--pk-space-sm)`	Icon–Label-Abstand innerhalb eines Tabs
`--pk-tabs-pad-md`	`var(--pk-space-md)`	Vertikales Padding der Tab-Buttons
`--pk-tabs-pad-lg`	`var(--pk-space-lg)`	Horizontales Padding der Tab-Buttons / Panel-Padding
`--pk-tabs-radius`	`var(--pk-radius-sm)`	Randradius der oberen Ecken (horizontal) / linken Ecken (vertikal)

Storybook

👉 Tabs in Storybook öffnen

Quellcode

src/components/tabs/Tabs.model.ts