Einführung

Ein überlagerndes Panel, das vom Rand des Bildschirms hereinschiebt und temporäre Inhalte, Formulare, Einstellungen oder mehrstufige Abläufe aufnimmt. Diese Komponente ermöglicht es Benutzern, Aufgaben auszuführen, Präferenzen anzupassen oder detaillierte Informationen zu überprüfen, ohne den Kontext ihrer primären Seitenansichten zu verlieren.

Die Drawer-Komponente ist vollständig als drawer-Block in den Page Builder integriert und ermöglicht es Content-Autoren und Entwicklern, Auslöseschaltflächen, beschreibende Kopfzeilen und benutzerdefinierte Aktionsfußzeilen direkt innerhalb des CMS zu konfigurieren.

Verwendung

Diese Beispiele veranschaulichen, wie Content-Editoren Drawer-Komponenten binden und strukturieren.

1. Standard-Einstellungskonfigurations-Drawer

Ein Standard-Konfigurationspanel, das einen Titel, eine Beschreibung und primäre/sekundäre Schaltflächenauslöser umfasst.

{
  "type": "drawer",
  "title": "Workspace Preferences",
  "description": "Customize your development workspace configurations.",
  "confirmText": "Apply Changes",
  "cancelText": "Cancel",
  "trigger": [
    {
      "type": "button",
      "text": "Open Settings",
      "variant": "outline"
    }
  ]
}

2. Informationsprüfungs-Drawer mit Benutzerdefiniertem Fuß

Zeigt eine alternative Layout-Komposition, bei der eine benutzerdefinierte Aktionsschaltflächenliste innerhalb des Fuß-Arrays neben Standardsteuerelementen bereitgestellt wird.

{
  "type": "drawer",
  "title": "System Diagnostics",
  "description": "Real-time node and performance overview.",
  "cancelText": "Dismiss",
  "trigger": [
    {
      "type": "button",
      "text": "Review System Specs"
    }
  ],
  "footer": [
    {
      "type": "button",
      "text": "Refresh Node",
      "variant": "subtle",
      "colorPalette": "blue"
    }
  ]
}

Props

Entwicklerhinweise & Barrierefreiheit

• Hydration-Insel: Da sich das gleitende Panel auf clientseitige Zustandsänderungen, Hintergrund-Overlay-Schließungen, Tastatur-Fokus-Traps und Touch-Interaktionen verlässt, hydriert es standardmäßig als interaktive Client-Insel ("interactive": true).
• WAI-ARIA-Konformität: Im Hintergrund erfüllt diese Komponente die Overlay-Spezifikationen (role="dialog", aria-modal="true", aria-labelledby, aria-describedby). Das Öffnen des Drawers fängt die Tastaturfokus automatisch im Panel ein. Durch Drücken der Escape-Taste oder Klicken auf die abgedunkelte Hintergrund-Overlay-Ebene wird der Drawer sicher geschlossen und der Fokus zurück zum Auslöserelement gebracht.
• Einheitliche Insel-Komposition: Um Hydration-Inkonsistenzen und Overlay-Kollisionsfehler in komplexen Client-Frames zu verhindern, werden verschachtelte Elemente (einschließlich Bestätigungsauslösern, Schließungs-Shims und Ladespinnern) in einer einzigen einheitlichen Inselumgebung gebündelt.