nutshell-framework/tab-element

Ein Tab-Element für Contao

dev-main 2026-07-16 13:20 UTC

Requires

• php: >=8.1
• contao/core-bundle: ^5.3
• symfony/http-kernel: ^6.4 || ^7.0

Requires (Dev)

• contao/manager-plugin: ~2.2
• terminal42/contao-build-tools: dev-main

GPL-3.0-or-later

• Erdmann & Freunde - Dennis Erdmann

• tabs
• contao
• content-element

Published on Packagist.org on 2026-07-21 11:20 UTC

README

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.

Installation

composer require nutshell-framework/tab-element

Verwendung

1. Im Backend ein Inhaltselement vom Typ Tab-Element anlegen (Kategorie Verschiedenes).
2. Innerhalb des Tab-Elements beliebige Inhaltselemente als Kind-Elemente einfügen.
3. Bei jedem Kind-Element die Bereichsüberschrift ausfüllen – dieser Text erscheint als Beschriftung des Reiters.

Styling

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)

Lizenz

GPL-3.0-or-later – (c) Erdmann & Freunde