Toolbar: Ribbon-Gruppen/Galerie

Zurück: Demo-Übersicht

Werkzeugleisten mit betitelten Gruppen und großen Schaltflächen statt einer Reihe gleich kleiner Symbole – wann sich die Ribbon-Form lohnt und wie sie aufgebaut wird.

Status: [Live] – baut auf dem [Live]-group-Schlüssel von toolbar() auf. Referenz: DevExpress Ribbon „Office 2019/Online“-Optik (betitelte Gruppen mit Trennlinie, große „Galerie“-Buttons statt einheitlich kleiner Icons).

Toolbar-Basiskontrakt bereits verstanden (group-Schlüssel).

Über die rein visuelle group-Trennung hinaus liefert der Ribbon-Modus:

• Gruppentitel unter der Gruppe (kleine, gedämpfte Beschriftung – „Format“, „Einfügen“ …, .wk-toolbar__group-label) statt reiner visueller Trennung; die betitelte Gruppe trägt role="group" + aria-labelledby auf den Titel.
• Größenvarianz je Item: ein „Galerie“-Item (size => 'large', Icon über Label, z. B. „Neue Tabelle“) neben mehreren kleinen Items derselben Gruppe.

echo $widgets->toolbar([
    ['label' => 'Neue Tabelle', 'element' => $neueTabelleButton, 'group' => 'entwurf', 'groupLabel' => 'Entwurf', 'size' => 'large'],
    ['label' => 'Spalte',       'element' => $spalteButton,      'group' => 'entwurf'],
], ['ribbonStyle' => true]);

Relevant für Toolbars mit vielen, kategorisierten Aktionen (z. B. Table-Designer mit „Entwurf“/„Ansicht“-Gruppen) – für einfache Toolbars genügt der bestehende Basiskontrakt.

Erweiterung von $items: 'groupLabel' => string am ersten Item einer neuen Gruppe (statt eines separaten Gruppen-Arrays – konsistent mit der bestehenden flachen $items-Liste, kein Strukturbruch); 'size' => 'small'|'large' je Item (Default small). Aufrufe ohne die neuen Schlüssel rendern byte-identisch zur Vorversion.

echo $widgets->toolbar([
    ['label' => 'Neue Tabelle', 'element' => $neueTabelleButton, 'group' => 'entwurf', 'groupLabel' => 'Entwurf', 'size' => 'large'],
    ['label' => 'Spalte',       'element' => $spalteButton,      'group' => 'entwurf'],
    ['label' => 'Index',        'element' => $indexButton,       'group' => 'entwurf'],
], ['ariaLabel' => 'Table-Designer-Aktionen', 'ribbonStyle' => true]);

• groupLabel auf einem Folge-Item derselben Gruppe wird ignoriert – nur das erste Item einer Gruppe setzt den Titel.

Betitelte Gruppen sind über role="group" + aria-labelledby an ihren sichtbaren Titel gekoppelt – bewusst ein autoritativer Gruppenname am Container statt aria-describedby an jedem Item (das hätte eine Injektion in Aufrufer-gebautes Element-HTML verlangt); Details: Toolbar → Accessibility.

Symptom: Gruppentitel erscheint nicht.

Ursache: groupLabel steht nicht am ersten Item der Gruppe.

Lösung: Schlüssel an das erste Item der Gruppe verschieben.

• Demo-Übersicht – alle Kategorien
• Toolbar: Grundlagen – geerbter group-Kontrakt