Introdução

Um contêiner modal sobreposto que interrompe a interação normal do usuário com a página para coletar entradas explícitas, exibir ferramentas vitais do painel ou solicitar confirmações de ação.

O componente Dialog está totalmente integrado como um bloco dialog no Page Builder, permitindo que os gestores de conteúdo definam facilmente gatilhos estruturais (como clicar em um botão de ação), títulos, menus de rodapé personalizados e texto do modal diretamente no Sveltia CMS.

Hidratação e Comportamento Interativo

Um Dialog requer um mecanismo JavaScript do lado do cliente para gerenciar o comportamento crítico de acessibilidade, a captura de foco e os controles de teclado. Como resultado, o diálogo é hidratado como uma ilha de cliente ativa por padrão. Se um invólucro de apresentação estático e somente leitura for desejado, defina "interactive": false para evitar o carregamento de recursos de script do lado do cliente.

Uso

Essas configurações representam exatamente como os itens de bloco do construtor de páginas são construídos.

1. Modal de Confirmação de Ação

Uma caixa de diálogo de confirmação padrão acionada por um botão de ação, com opções de cancelar e aceitar. Ideal para escolhas simples como verificar configurações ou confirmar itens.

{
  "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 Ação Destrutiva (Função Alertdialog)

Use este formato para confirmações destrutivas de alto impacto e irreversíveis (por exemplo, excluir um banco de dados ou descartar trabalho não salvo). Essa configuração altera o papel semântico de tela do diálogo para 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

Acessibilidade e Notas do Desenvolvedor

Está em conformidade com o padrão de design Dialog (Modal) WAI-ARIA. Quando hidratado, o componente implementa as seguintes camadas críticas de acessibilidade:

• Armadilha de Foco Inicial: O foco muda para o diálogo ao abrir (selecionando primeiro a ação cancelar/segura para evitar acionadores acidentais) e permanece preso internamente ao rolar com Tab / Shift + Tab.
• Inércia de Fundo: Elementos interativos fora do contêiner modal aberto são automaticamente marcados com o atributo HTML inert para impedir que leitores de tela ou controles de teclado foquem elementos atrás do plano de fundo.
• Tratamento de Fechamento por Escape: Pressionar o botão Escape do teclado fecha automaticamente o contenedor de diálogo ativo (a menos que closeOnEscape seja configurado de outra forma).
• Bloqueio de Rolagem do Corpo: A rolagem do corpo do documento é congelada enquanto uma modal está ativa e é restaurada automaticamente assim que o diálogo conclui sua transição de fechamento.