Einführung

Ein überlagerndes Modalfenster, das die normale Benutzerinteraktion mit der Seite unterbricht, um explizite Eingaben zu erfassen, wichtige Dashboard-Werkzeuge anzuzeigen oder Aktionsbestätigungen anzufordern.

Die Dialog-Komponente ist vollständig als dialog-Block in den Page Builder integriert und ermöglicht es Content-Managern, strukturelle Auslöser (z. B. das Klicken auf eine Aktionsschaltfläche), Titel, benutzerdefinierte Fußzeilen-Menüs und Modaltexte direkt in Sveltia CMS zu definieren.

Hydration & Interaktives Verhalten

Ein Dialog benötigt eine clientseitige JavaScript-Engine, um kritisches Barrierefreiheitsverhalten, Fokus-Einfangen und Tastatursteuerung zu verwalten. Daher hydriert sich der Dialog standardmäßig als aktive Client-Insel. Wenn eine statische, schreibgeschützte Präsentationshülle gewünscht ist, setzen Sie "interactive": false, um das Laden clientseitiger Skriptressourcen zu verhindern.

Verwendung

Diese Konfigurationen zeigen genau, wie Page-Builder-Block-Elemente konstruiert werden.

1. Aktionsbestätigungs-Modal

Ein Standard-Bestätigungsdialog, der über eine Aktionsschaltfläche ausgelöst wird und über Abbrechen- und Akzeptieren-Optionen verfügt. Ideal für einfache Entscheidungen wie das Überprüfen von Einstellungen oder das Bestätigen von Elementen.

{
  "type": "dialog",
  "title": "Confirm Account Sync",
  "description": "Are you sure you want to merge workspace details?",
  "body": "This syncs configurations across devices. Unsaved local changes might be overridden.",
  "confirmText": "Synchronize",
  "cancelText": "Dismiss",
  "trigger": [
    {
      "type": "button",
      "text": "Trigger Action Modal",
      "colorPalette": "blue"
    }
  ]
}

2. Warnung bei Destruktiver Aktion (Alertdialog-Rolle)

Verwenden Sie dieses Format für folgenschwere, irreversible destruktive Bestätigungen (z. B. das Löschen einer Datenbank oder das Verwerfen nicht gespeicherter Arbeit). Diese Konfiguration ändert die semantische Bildschirmrolle des Dialogs in alertdialog.

{
  "type": "dialog",
  "role": "alertdialog",
  "title": "Destroy Database",
  "description": "You are about to permanently erase production server nodes.",
  "body": "This operation is immediate and completely irreversible. All live connections will instantly shut down.",
  "confirmText": "Erase Forever",
  "cancelText": "Keep Database",
  "trigger": [
    {
      "type": "button",
      "text": "Delete Database",
      "colorPalette": "red"
    }
  ]
}

Props

Barrierefreiheit & Entwicklerhinweise

Entspricht dem Dialog (Modal) WAI-ARIA-Designmuster. Bei Hydration implementiert die Komponente die folgenden kritischen Barrierefreiheitsschichten:

• Anfänglicher Fokus-Trap: Der Fokus wechselt beim Öffnen in den Dialog (wobei zuerst die Abbrechen/Sicherheitsaktion ausgewählt wird, um versehentliche Auslöser zu vermeiden) und bleibt intern gefangen, während mit Tab / Shift + Tab gescrollt wird.
• Hintergrund-Trägheit: Interaktive Elemente außerhalb des geöffneten Modal-Containers werden automatisch mit dem HTML-Attribut inert markiert, um zu verhindern, dass Bildschirmlesegeräte oder Tastatursteuerungen Elemente hinter dem Hintergrund fokussieren.
• Escape-Schließung: Durch Drücken der Escape-Tastaturtaste wird der aktive Dialog-Container automatisch geschlossen (sofern closeOnEscape nicht anders konfiguriert ist).
• Body-Scroll-Sperre: Das Scrollen des Dokumentenkörpers wird eingefroren, solange eine Modal aktiv ist, und nach Abschluss der Schließanimation des Dialogs automatisch wiederhergestellt.