Tabs Registerkarten
Einführung
Eine visuelle Layout-Komponente, die dichte, verwandte Informationen in mehrere sich gegenseitig ausschließende Panels organisiert. Nutzer können nahtlos zwischen Panels wechseln, ohne neue Seiten zu laden oder das Layout zu überladen.
Verwendung
Die Tabs-Komponente ist als tabs-Block vollständig im Page Builder integriert, sodass Autoren Tab-Ansichten leicht erstellen, visuelle Eigenschaften konfigurieren und verschachtelte Blöcke direkt in Vorlagen anordnen können.
Diese Konfigurationen zeigen genau, wie Page-Builder-Block-Items konstruiert werden.
1. Klassische horizontale Tabs (Line-Variante)
Unser Standard-Layout mit unterstrichenem Trigger-Indikator und flüssigen Gleitübergängen. Perfekt für Produktfunktionen, Details oder Dokumentations-Untermenüs.
{
"type": "tabs",
"variant": "line",
"size": "md",
"items": [
{
"value": "features",
"label": "⚡ Key Features",
"content": [
{
"type": "text",
"content": "Our Hono/JSX Tabs component supports zero runtime styled-system classes, smooth sliding indicator transitions, and native keyboard interaction."
}
]
},
{
"value": "pricing",
"label": "💎 Pricing Plans",
"content": [
{
"type": "text",
"content": "Flexible subscription pricing for individuals, start-ups, and scaling enterprise workspaces."
}
]
}
]
}
Our Hono/JSX Tabs component supports zero runtime styled-system classes, smooth sliding indicator transitions, and native keyboard interaction.
2. Geschlossener Ordner-Stil (kompakt)
Rendert die Tab-Liste mit umrandeten Button-Gehäusen ähnlich Ordner-Trennern. Excel lent für Dashboard-Menüs, Interface-Einstellungen oder kompakte Konfigurationsbereiche.
{
"type": "tabs",
"variant": "enclosed",
"size": "sm",
"items": [
{
"value": "profile",
"label": "User Profile",
"content": [
{
"type": "text",
"content": "Manage personal information, billing details, and customized regional preferences."
}
]
},
{
"value": "security",
"label": "Security",
"content": [
{
"type": "text",
"content": "Configure multi-factor authentication codes, view active sessions, and update credentials."
}
]
}
]
}
Manage personal information, billing details, and customized regional preferences.
Props
| Eigenschaft | CMS-Feldtyp | Standard | Beschreibung / unterstützte Optionen |
|---|---|---|---|
Tab-Items (items) | list | - | Array von Tab-Blöcken. Jedes Item benötigt ein eindeutiges value, label und eine content-Blockliste. |
Visuelle Variante (variant) | select | "line" | Visueller Erscheinungsstil. • "line" — Minimale Text-Trigger mit Unterstrich-Indikator. • "subtle" — Schattierte, abgerundete Tags. • "enclosed" — Klassisches umrandetes Ordner-Tab-Design. |
Größenstufe (size) | select | "md" | Steuert Padding, Abstände und Schriftgröße. • Optionen: "xs", "sm", "md", "lg". |
Ausrichtung (orientation) | select | "horizontal" | Achsenrichtung der Trigger-Liste. "horizontal" oder "vertical". |
Aktivierungsmodus (activationMode) | select | "automatic" | • "automatic" — Panel wechselt bei Fokus sofort. • "manual" — Nur bei Space/Enter. |
Loop-Fokus (loopFocus) | boolean | true | Zykliert Tastaturfokus am Ende zurück zum ersten Item. |
Lazy Mounting (lazyMount) | boolean | false | Verzögert das Rendern inaktiver Panels bis zum ersten Besuch. |
Accessibility & Developer Notes
Diese Komponente erfüllt ab Werk das WAI-ARIA Tabs Design Pattern. Bei Hydratation implementiert sie folgende Ebenen:
- Semantische Rollen:
role="tablist"auf der Liste,role="tab"auf Triggern,aria-selectedfür den aktiven Zustand,aria-controlsreferenziert Panel-IDs. - Roving-Fokus-Navigation: Pfeiltasten navigieren per Fokus-Roaming
tabIndex.Home/Endspringen zu den Enden. - Dynamischer CSS-Gleit-Indikator: Absolut positionierter Slider fragt Positionsmetriken ab und animiert flüssig ohne Layout-Thrashing.
- Umgehung von Hono-Reconciler-Grenzen: In Preact-Inseln manipuliert der State-Manager Trigger-Attribute (
data-selected,aria-selected,tabindex,hidden) direkt bei Events, unabhängig von der Reconciler-Zeitleiste.