Pular para o conteúdo principal

Dialog​

Componente Dialog

📘 Modo de Uso​

O Dialog deve ser utilizado para capturar a atenção do usuário em situações que exigem confirmação, alerta ou mensagens informativas.

Principais usos​

  • Mensagens informativas: caixas de diálogo usadas para mensagens rápidas e concisas que os usuários podem confirmar e fechar.
  • Confirmações ou decisões: exibem dois botões com opções opostas, explicando as consequências e pedindo confirmação antes de prosseguir.
  • Alertas e erros: apresentam informações críticas que exigem atenção imediata, como erros ou mudanças nas condições do aplicativo.
  • Modal: aparece sobre o conteúdo principal e desativa a interface até que o usuário interaja com ele.
  • Não-modal (ou modeless): não bloqueia o conteúdo principal e pode coexistir com outras interações.

🧩 Anatomia​

Anatomia do Dialog

📋 Propriedades​

Propriedades do Dialog

⌨️ Código​

opl.surfaces.component.dialog

🎨 Variantes​

Opções​

Opções do Dialog

📃 Observações​

  • O usuário deve ter a capacidade de redimensionar ou mover o Dialog na tela, especialmente em diálogos grandes ou com muitos dados.
  • Se o conteúdo exceder o tamanho da janela, deve haver scroll interno.
  • Em diálogos modais, utilize sempre uma sobreposição (overlay) que escureça o conteúdo de fundo para focar a atenção no Dialog.

🛡️ Boas Práticas e Acessibilidade​

  • O foco do teclado deve ir automaticamente para o primeiro elemento interativo do Dialog ao ser aberto.
  • Em diálogos modais, deve ficar claro que o conteúdo externo está inativo/desabilitado, por meio de sombreamento ou desfoque.