Mit tab-element lassen sich Inhalte in Contao in umschaltbaren Reitern (Tabs) organisieren.
Das Element baut auf den verschachtelten Inhaltselementen von Contao 5.3+ auf: Du legst ein
Tab-Element an und fügst darin beliebige Inhaltselemente als Kind-Elemente ein. Jedes Kind-Element
wird zu einem Tab – die Beschriftung des Reiters stammt aus der Bereichsüberschrift
(sectionHeadline) des jeweiligen Kind-Elements.
composer require nutshell-framework/tab-element- Im Backend ein Inhaltselement vom Typ Tab-Element anlegen (Kategorie Verschiedenes).
- Innerhalb des Tab-Elements beliebige Inhaltselemente als Kind-Elemente einfügen.
- Bei jedem Kind-Element die Bereichsüberschrift ausfüllen – dieser Text erscheint als Beschriftung des Reiters.
Das Bundle liefert bewusst nur funktionales CSS mit (inaktive Inhalte ausblenden, aktiven Inhalt anzeigen). Das visuelle Design übernimmt dein Theme über die folgenden Klassen:
| Klasse | Bedeutung |
|---|---|
.content-tab |
Wrapper des gesamten Elements |
.tablist |
Container der Reiter-Buttons |
.tab__button |
einzelner Reiter-Button (.active = aktiv) |
.tablist__toggler |
mobiler Umschalt-Button (per Default ausgeblendet) |
.tab__content |
einzelner Inhaltsbereich (.active = sichtbar) |
GPL-3.0-or-later – (c) Erdmann & Freunde