Tabs
Synonyme: Navigation, Registerkartenleiste, Tab-Navigation
Beschreibung: Die Tabs-Komponente organisiert verwandte Inhalte auf derselben Seite in separaten Registerkarten. Sie ermöglicht es Nutzer:innen, zwischen verschiedenen Inhaltsabschnitten zu wechseln, ohne die Seite zu verlassen. Dies ist besonders nützlich für datenaufwändige Seiten oder zur Gliederung logisch zusammenhängender Informationen.
Beispiel
Standard-Tabs mit mehreren Registerkarten und wählbarem Inhalt:
<KolTabs _align="top" _label="Meine Tabs" _tabs={[{"_label":"Tab 1"},{"_label":"Tab 2"},{"_label":"Tab 3"}]} />Barrierefreiheit
- Fokus und Navigation: Nur ein Tab pro Gruppe kann durch Tastaturnavigation fokussiert werden. Mit den Pfeiltasten können Nutzer:innen zwischen den Tabs wechseln, um die Navigations-Usability zu verbessern.
- Label-Pflicht: Jeder Tab benötigt ein Label (über
_labelin der Tab-Definition), um den Zweck deutlich zu machen. - Screenreader-Unterstützung: Screenreader geben das Label des fokussierten und selektierten Tabs aus. Bei
_behavior="select-automatic"kann dies zu einer Doppelausgabe führen (Focus + Select), diese wird aber von den getesteten Screenreadern nur einmal gesprochen. - Verhaltensoptionen: Der
_behavior-Modus bietet zwei Optionen, um nutzende mit unterschiedlichen Vorlieben zu unterstützen.
Links und Referenzen
Verwendung
Tastatursteuerung
| Taste | Funktion |
|---|---|
Tab | Fokussiert die Tab-Navigationsleiste (nur ein Tab ist fokussierbar). |
Pfeil-Tasten (links / rechts) | Wechselt zwischen den Tabs. |
Enter / Leertaste (bei select-manual) | Selektiert den fokussierten Tab. |
Best Practices / Empfehlungen
- Verwenden Sie Tabs, um verwandte Inhalte logisch zu organisieren und zu gruppieren, sodass Nutzer:innen die Seite nicht verlassen müssen.
- Positionieren Sie Tabs in einer einzelnen, bei Bedarf scrollbaren Zeile über dem Inhalt, auf den sie sich beziehen.
- Nutzen Sie klare, prägnante Tab-Labels, um den Inhalt deutlich zu beschreiben und zwischen den Abschnitten zu unterscheiden.
- Verwenden Sie Tabs nicht zur Darstellung einer sequenziellen oder zeitlichen Abfolge (nutzen Sie hierzu Stepper oder Wizard).
- Verwenden Sie Tabs nicht für Inhaltsvergleiche (z. B. unterschiedliche Spezifikationen Seite an Seite).
- Berücksichtigen Sie die Anzahl der Tabs: Bei zu vielen Tabs (5+) sollten Sie Inhalte weiter unterteilen oder ein alternatives Navigationsmuster verwenden.
- Bei der Auswahl zwischen
_behavior="select-automatic"und_behavior="select-manual": Automatic ist die Standardvariante und wird von der WAI-ARIA definitioniert; Manual ermöglicht präzisere Nutzerkontrolle, erfordert aber zusätzliche Interaktion.
Anwendungsfälle
- Gliederung von Benutzerprofilen in verschiedene Abschnitte (z. B. persönliche Informationen, Termine, aktive Services).
- Kategorisierung von Dienstleistungen oder Vorteilen in verschiedene Gruppen.
- Strukturierung von FAQ-Seiten in thematische Kategorien.
- Multi-Tab-Dashboards mit verschiedenen Datenansichten.
- Organiserung von Formularen in mehrschrittigen Prozessen (wenn kein Wizard erforderlich ist).
FAQ
Wie wird die aktive Registerkarte bestimmt?
Beim initiale Laden ist standardmäßig die erste Registerkarte (Index 0) aktiv. Sie können die aktive Registerkarte mit dem Attribut _selected manuell festlegen oder über den select-Event gesteuert werden.
Kann ein Tab deaktiviert werden?
Ja, indem Sie in der Tab-Definition das Attribut _disabled auf true setzen.
Welche Verhaltensweisen (_behavior) sind möglich?
"select-automatic" (Standard): Pfeiltasten wechseln Fokus und Selektion gleichzeitig.
"select-manual": Pfeiltasten wechseln nur den Fokus, die Selektion erfolgt per Enter / Leertaste.
Konstruktion / Technik
Playground
Testen Sie die verschiedenen Eigenschaften der Tabs-Komponente:
<KolTabs _align="top" _label="Tabs" _tabs={[{"_label":"Tab 1","_icons":"kolicon-house"},{"_label":"Tab 2","_disabled":true},{"_label":"Tab 3"},{"_label":"Tab 4"},{"_label":"Tab 5"}]} />Funktionalitäten (mit Code)
Basis-Tabs
Die einfachste Verwendung mit mehreren Registerkarten:
<KolTabs _align="top" _label="Navigation" _tabs={[{"_label":"Übersicht"},{"_label":"Details"},{"_label":"Einstellungen"}]} />Ausrichtung
Die Tabs können an verschiedenen Positionen ausgerichtet werden:
<KolTabs _align="top" _label="Ausgerichtete Tabs" _tabs={[{"_label":"Tab 1"},{"_label":"Tab 2"},{"_label":"Tab 3"}]} />Verfügbare Werte für _align:
"top"(Standard): Tabs oben"bottom": Tabs unten"left": Tabs links"right": Tabs rechts
Verhalten: Automatische vs. manuelle Selektion
Der _behavior-Parameter steuert, wie Nutzer:innen zwischen Tabs wechseln:
<KolTabs _align="top" _behavior="select-automatic" _label="Verhalten" _tabs={[{"_label":"Automatisch"},{"_label":"Manuell"}]} />Verhaltensoptionen:
"select-automatic": Pfeiltasten wechseln direkt zum nächsten Tab (W3C Standard)."select-manual": Pfeiltasten setzen Fokus,Enter/ Leertaste wählen den Tab aus.
Create-Button
Ein zusätzlicher Button am Ende der Tab-Leiste zum dynamischen Hinzufügen neuer Tabs:
<KolTabs _align="top" _hasCreateButton={true} _label="Mit Create-Button" _tabs={[{"_label":"Tab 1"},{"_label":"Tab 2"}]} />Der _hasCreateButton-Button erzeugt das create-Event, wenn angeklickt.
Aktiven Tab auswählen
Steuern Sie den aktiven Tab programmgesteuert mit _selected:
<KolTabs _align="top" _label="Aktiver Tab" _selected={1} _tabs={[{"_label":"Tab 1"},{"_label":"Tab 2"},{"_label":"Tab 3"}]} />Der Wert ist der Index des Tabs (0-basiert).
Events
Zur Behandlung von Events bzw. Callbacks siehe
| Event | Auslöser | Value |
|---|---|---|
select | Ein Tab wurde ausgewählt | Index des ausgewählten Tabs |
create | Create-Button wurde angeklickt | - |
API
Overview
The Tabs component is used to organize related content on the same page and navigate between them. Tabs ensure that large amounts of content can be more easily organized for users.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_align | _align | Defines the visual orientation of the component. | "bottom" | "left" | "right" | "top" | undefined | 'top' |
_behavior | _behavior | Defines which behavior is active. | "select-automatic" | "select-manual" | undefined | undefined |
_hasCreateButton | _has-create-button | Defines whether the element has a create button. | boolean | undefined | false |
_label (required) | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | string | undefined |
_on | -- | Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen. | undefined | { onCreate?: EventCallback<Event> | undefined; } & { onSelect?: EventValueOrEventCallback<MouseEvent | KeyboardEvent | CustomEvent<any> | PointerEvent, number> | undefined; } | undefined |
_selected | _selected | Defines which tab is active. | number | undefined | 0 |
_tabs (required) | _tabs | Defines the tab captions. | TabButtonProps[] | string | undefined |
Methods
click
click() => Promise<void>
Triggers a click on the currently selected tab.
Returns
Type: Promise<void>
focus() => Promise<void>
Sets focus on the current tab button.
Returns
Type: Promise<void>