Tabs¶
Überblick¶
Der Tabs‑Block erzeugt eine Bootstrap‑Register-Navigation (nav-tabs) mit zugehörigen Tab‑Inhalten.
Titel, Reihenfolge und Anzahl der Tabs werden im LiveCanvas‑Panel gesteuert, die Inhalte bearbeitest du direkt im Editor.
Der Block wird im LiveCanvas‑Panel unter TWtheme → Tabs angeboten.
Block-Struktur¶
Der Block basiert auf einem Wrapper mit lc-helper="twtheme-tabs". Darin liegen eine Navigation mit nav nav-tabs und der zugehörige Inhaltsbereich tab-content. Jeder Navigationspunkt verweist über data-bs-target auf eine tab-pane, die ihren Content wieder als normalen lc-block enthält.
Die technischen IDs der Tab‑Links und Panes werden vom Panel sauber gepaart erzeugt (...-tab-1, ...-pane-1 usw.), damit Bootstrap‑Verhalten und ARIA‑Bezüge konsistent bleiben.
Einstellungen im LiveCanvas-Panel¶
Mit der Tabs-ID (System-ID) legst du das Präfix für Navigation und Content‑Panes fest, zum Beispiel productTabs. Über Tabs laden übernimmt das Panel den aktuellen Stand aus der Vorschau, über Tab hinzufügen ergänzt du neue Einträge, und per Drag & Drop sortierst du die Reihenfolge um.
Beim Speichern schreibt das Panel die Zuordnungen von Link und Pane neu, passt IDs und ARIA‑Attribute an und übernimmt die bestehenden Pane‑Inhalte in die neue Reihenfolge. Inhalt geht dadurch nicht verloren, auch wenn Tabs umbenannt oder umsortiert werden.
Verhalten im Editor¶
Die Tabs sind im LiveCanvas‑Editor unmittelbar klickbar. Ein Klick auf einen Navigationspunkt aktiviert den passenden Pane (.show.active), sodass du den Inhalt direkt im richtigen Kontext bearbeiten kannst. Umbenennen, Löschen und Sortieren laufen vollständig über das Panel, während der Pane‑Inhalt selbst als normaler lc-block bearbeitbar bleibt.
Verhalten im Frontend¶
Im Frontend nutzt der Block das normale Bootstrap‑Tab‑Verhalten. Das generierte Markup bleibt kompatibel mit den Standardklassen nav-tabs und tab-pane, wodurch Theme‑Styles und bestehende Bootstrap‑Patterns direkt greifen.
Entwicklertipps¶
Der Block eignet sich besonders für Produkt‑Tabs, FAQ‑Bereiche oder klar getrennte Inhaltssektionen auf Landingpages. Für bessere Orientierung und SEO lohnt es sich, präzise Tab‑Titel wie „Beschreibung“, „Technische Daten“ oder „FAQ“ zu verwenden.
Technische Dokumentation¶
Überblick¶
Dieses Kapitel fasst den aktuellen Stand zu tabs direkt aus dem Theme-Code zusammen.
Einstellungen¶
| Funktion | Einstellungskontext |
|---|---|
twtheme_enableTabSorting() |
Steuert den Bereich enableTabSorting. |
twtheme_reindexTabs() |
Steuert den Bereich reindexTabs. |
Entwicklertipps¶
Relevante Funktionen¶
| Funktion | Parameter | Zweck |
|---|---|---|
twtheme_enableTabSorting() |
— | Steuert den Bereich enableTabSorting. |
twtheme_reindexTabs() |
— | Steuert den Bereich reindexTabs. |
Stand: 2026-03-11