Introduction

Un conteneur modal superposé qui interrompt l'interaction normale de l'utilisateur avec la page pour recueillir des saisies explicites, afficher des outils de tableau de bord essentiels ou demander des confirmations d'action.

Le composant Dialog est entièrement intégré en tant que bloc dialog dans le Page Builder, permettant aux gestionnaires de contenu de définir facilement des déclencheurs structurels (tels que le clic sur un bouton d'action), des titres, des menus de pied de page personnalisés et du texte modal directement dans Sveltia CMS.

Hydratation et Comportement Interactif

Un Dialog nécessite un moteur JavaScript côté client pour gérer le comportement critique d'accessibilité, le piégeage du focus et les contrôles au clavier. Par conséquent, la boîte de dialogue s'hydrate par défaut sous forme d'îlot client actif. Si un enveloppe de présentation statique et en lecture seule est souhaitée, définissez "interactive": false pour empêcher le chargement des ressources de script côté client.

Utilisation

Ces configurations représentent exactement comment les éléments de bloc du constructeur de pages sont construits.

1. Modale de Confirmation d'Action

Une boîte de dialogue de confirmation standard déclenchée via un bouton d'action, comprenant les options annuler et accepter. Idéale pour des choix simples comme vérifier des paramètres ou confirmer des éléments.

{
  "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. Alerte d'Action Destructrice (Rôle Alertdialog)

Utilisez ce format pour des confirmations destructrices à fort impact et irréversibles (par exemple, supprimer une base de données ou abandonner un travail non enregistré). Cette configuration modifie le rôle sémantique à l'écran de la boîte de dialogue en 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

Accessibilité et Notes de Développement

Conforme au modèle de conception Dialog (Modal) WAI-ARIA. Lors de l'hydratation, le composant implémente les couches d'accessibilité critiques suivantes :

• Piégeage du Focus Initial : Le focus se déplace dans la boîte de dialogue à l'ouverture (en sélectionnant d'abord l'action annuler/sécurisée pour éviter les déclenchements accidentels) et reste piégé en interne lors du défilement avec Tab / Shift + Tab.
• Inertie d'Arrière-plan : Les éléments interactifs à l'extérieur du conteneur modal ouvert sont automatiquement marqués avec l'attribut HTML inert pour empêcher les lecteurs d'écran ou les contrôles clavier de focaliser des éléments derrière l'arrière-plan.
• Gestion de la Fermeture Échap : En appuyant sur la touche clavier Escape, le conteneur de dialogue actif se ferme automatiquement (sauf si closeOnEscape est configuré autrement).
• Verrouillage du Défilement du Corps : Le défilement du corps du document est figé tant qu'une modale est active et est automatiquement restauré une fois que la boîte de dialogue a terminé sa transition de fermeture.