Einführung

Die ToggleGroup-Komponente ist eine Gruppe von Umschalt-Schaltflächen für Einzel- oder Mehrfachauswahl. Sie wird häufig verwendet, um Benutzern die Wahl exklusiver Layout-Stile (z. B. Ansichts-Umschalter für Raster vs. Liste) oder inklusiver Modifikatoren (z. B. Textformatierungs-Schaltflächen für Fett, Kursiv und Unterstrichen) zu ermöglichen.

Die ToggleGroup ist vollständig als toggleGroup-Block im Page Builder integriert, sodass Redakteure und Entwickler visuelle Optionen, Mehrfachauswahl-Verhalten und aktive Farbpaletten direkt im CMS konfigurieren können.

Verwendung

Diese Beispiele veranschaulichen, wie Redakteure interaktive Umschalt-Schaltflächen binden und strukturieren.

1. Mehrfachauswahl-Textformatierungsleiste

Erlaubt, dass mehrere Elemente gleichzeitig gedrückt und aktiv sind. Hervorragend geeignet für Mehrfachauswahl-Feature-Schalter oder Texteditor-Panels.

{
  "type": "toggleGroup",
  "multiple": true,
  "defaultValue": ["bold"],
  "items": [
    { "label": "B", "value": "bold" },
    { "label": "I", "value": "italic" },
    { "label": "U", "value": "underline" }
  ],
  "interactive": true
}

2. Einzelauswahl-Layout-Umschalter (Lila-Thema)

Zeigt den Einzelauswahl-Modus, bei dem jeweils nur ein Element aktiv sein kann. Aktive Auswahlen werden mit benutzerdefinierten lila Akzent-Thementokens gestaltet.

{
  "type": "toggleGroup",
  "multiple": false,
  "defaultValue": ["list"],
  "items": [
    { "label": "Grid View", "value": "grid" },
    { "label": "List View", "value": "list" }
  ],
  "colorPalette": "purple",
  "interactive": true
}

3. Kompakte vertikale Navigationsgruppe

Ordnet die Umschalt-Optionen vertikal statt horizontal an und verwendet eine kompakte Größenstufe.

{
  "type": "toggleGroup",
  "orientation": "vertical",
  "defaultValue": ["dashboard"],
  "items": [
    { "label": "Dashboard", "value": "dashboard" },
    { "label": "Settings", "value": "settings" }
  ],
  "size": "sm",
  "interactive": true
}

Eigenschaften

Schema der Umschaltgruppen-Elemente

Jeder Eintrag im items-Array akzeptiert folgende Parameter:

Entwicklerhinweise & Barrierefreiheit

• WAI-ARIA-Barrierefreiheitsmuster: Rendert eine robuste, tastaturnavigierbare Symbolleiste:
  • Der Wurzel-Container erhält role="group".
  • Einzelne Elemente werden als role="checkbox" mit aria-checked-Zuständen gerendert, wenn multiple true ist, bzw. als role="radio" mit aria-checked-Zuständen sonst.
• Roaming-Fokus-Tastaturnavigation: Unterstützt native Fokusbewegung:
  • Pfeiltasten (Rechts/Runter vorwärts, Links/Hoch rückwärts) wandern den Fokus automatisch zwischen aktiven Schaltflächen und passen sich der gewählten orientation-Achse an.
  • Die Tasten Home und End springen den Fokus sofort auf die erste bzw. letzte aktivierte Schaltfläche in der Gruppe.
• Formular-Verknüpfung: Umschalt-Optionen aktualisieren nahtlos den zugehörigen State-Kontext, sodass übergeordnete Container oder Formular-Hooks Änderungen dynamisch erfassen können.