Introducción

Un contenedor modal superpuesto que detiene la interacción normal del usuario con la página para recopilar entradas explícitas, mostrar herramientas vitales del panel o solicitar confirmaciones de acción.

El componente Dialog está totalmente integrado como un bloque dialog en el Page Builder, lo que permite a los gestores de contenido definir fácilmente activadores estructurales (como hacer clic en un botón de acción), títulos, menús de pie de página personalizados y texto del modal directamente dentro de Sveltia CMS.

Hidratación y Comportamiento Interactivo

Un Dialog requiere un motor de JavaScript del lado del cliente para gestionar el comportamiento crítico de accesibilidad, la captura de foco y los controles de teclado. Como resultado, el diálogo se hidrata como una isla de cliente activa por defecto. Si se desea un contenedor de presentación estático y de solo lectura, establezca "interactive": false para evitar cargar recursos de scripts del lado del cliente.

Uso

Estas configuraciones representan exactamente cómo se construyen los elementos de bloque del page builder.

1. Modal de Confirmación de Acción

Un diálogo de confirmación estándar activado mediante un botón de acción, completo con opciones de cancelar y aceptar. Ideal para elecciones simples como revisar configuraciones o confirmar elementos.

{
  "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. Alerta de Acción Destructiva (Rol Alertdialog)

Use este formato para confirmaciones destructivas de alto impacto e irreversibles (por ejemplo, eliminar una base de datos o descartar trabajo no guardado). Esta configuración cambia el rol semántico de pantalla del diálogo a 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

Accesibilidad y Notas para Desarrolladores

Cumple con el patrón de diseño Dialog (Modal) WAI-ARIA. Cuando se hidrata, el componente implementa las siguientes capas críticas de accesibilidad:

• Captura de Foco Inicial: El foco se desplaza al diálogo al abrirse (seleccionando primero la acción cancelar/segura para evitar activadores accidentales) y permanece atrapado internamente al desplazarse con Tab / Shift + Tab.
• Inercia de Fondo: Los elementos interactivos fuera del contenedor modal abierto se marcan automáticamente con el atributo HTML inert para evitar que los lectores de pantalla o los controles de teclado enfoquen elementos detrás del fondo.
• Manejo de Cierre con Escape: Al presionar el botón Escape del teclado se cierra automáticamente el contenedor de diálogo activo (a menos que closeOnEscape se configure de otra manera).
• Bloqueo de Desplazamiento del Cuerpo: El desplazamiento del cuerpo del documento se congela mientras una modal está activa y se restaura automáticamente una vez que el diálogo ha completado su transición de cierre.