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: