Füge schnelle, dynamische Funktionalität hinzu, um zwischen verschiedenen Blöcken von Inhalten zu wechseln.
Zuerst muss ein "Tab-Container" (Container-Element) im Backend erstellt werden.
Hier kann das Aussehen (Tabs/Pills/Vertical Pills) und der Fade Effekt gewählt werden.
In diesen "Tab-Container" können dann beliebig viele "Tab Elemente" (Container-Element) erstellt werden.
Dieses "Tab Element" kann beliebig viele Inhaltselemente enthalten.
Struktur und Funktionalität
1. Der Tab-Container (Parent):
Dieser steuert das globale Layout der Navigation.
Aussehen:
Auswahl zwischen .nav-tabs (klassisch mit Rahmen) oder .nav-pills (als Buttons).
Vertical Pills:
Nutzt .flex-column, ideal für seitliche Menüs auf Desktop-Geräten.
Fade-Effekt:
Steuert, ob beim Wechsel die Klasse .fade für sanfte Übergänge genutzt wird.
2. Das Tab-Element (Child):
Dies ist der eigentliche "Reiter".
Tab-Header:
Dieser wird in der Navigationsleiste oben (oder seitlich) angezeigt.
Inhaltsbereich:
Hier greift die volle Flexibilität:
Da es ein Container-Element ist, kann ein Tab nicht nur Text enthalten, sondern z. B. auch ein Media Object, ein Accordion oder ein Kontaktformular u.v.m.
Anstatt Content Elemente, kann hier auch der Inhalt von Seiten (colPos=0) referenziert werden.
Beispiele
Tabs
Tab Content 1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Das Inhaltselement "Button"
Wichtige Felder & Optionen:
Link-Ziel: Standard-TYPO3 “Link Wizard” für interne/externe Ziele und Datei-Downloads.
Kontextfarben: Auswahl via Dropdown (primary, secondary, success, danger, outline-primary, etc.).
Größen: Unterstützung für .btn-sm, .btn-lg.
Block level button: Button über die gesamte Breite.
Outline button: Button ohne Hintergrundfarbe.
Fixed position: Button am Browser-Rand
Link title: Button Text - überschreibt “Header”
Beispiele
Container-Element "Button Group"
Dieses Element dient als Container (Wrapper) für die einzelnen Button-Elemente und nutzt die Bootstrap-Logik für .btn-group.
Horizontale/Vertikale Ausrichtung: Über eine Flexform-Einstellung wird zwischen .btn-group und .btn-group-vertical gewechselt.
Dropdown-Funktionalität: Unterstützung für Button-Dropdowns, wobei die Ausrichtung (dropup, dropend, dropstart) ebenfalls über das "Erscheinungsbild" gesteuert wird.
Barrierefreiheit: Automatische Generierung von role="group" und passenden aria-labels.
Beispiele
Mit dem neuen Inhaltselement "BS Button" kann ein Button mit vordefinierten Stilen (Kontextfarben) und Größen erstellt werden.
Unter "Erscheinungsbild" können die entsprechenden Einstellungen für den Button angepasst werden.
In Verbindung mit dem neuen Gridelement "Button group" ist eine horizontale oder vertikale Gruppierung mehrerer Buttons, sowie die Ausrichtung (direction) für die Dropdown Menus möglich.
Buttons im CKEditor
Buttons können auch im CKEditor erstellt werden!
Beim erstellen eines Links kann im “Link Browser” eine Button-Class mit kontextbezogenen Farbklassen auswählt werden.
Infos:
Pills
Pill Content 1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Pill Content 2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.
Vertical Pills
Pill Content 1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Pill Content 2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.
Infos: