Dialog
O Dialog é um componente de interface que exibe uma pequena janela sobre o conteúdo da tela para comunicar informações importantes ou solicitar uma decisão do usuário.
Uso
O Dialog pode ser utilizado para exibir mensagens de confirmação, avisos ou alertas antes que o usuário finalize uma ação que possa ser destrutiva, irreversível ou que o retire de um fluxo e também para oferecer controles rápidos e relevantes para o contexto atual da tela.
Anatomia
❖. Container
Estrutura externa que agrupa todos os elementos internos do componente. Para o container deve ser aplicado o componente de modal que padroniza a aplicação do BG e definições de elevation para estes componentes.
1. Título (Opcional)
Um texto conciso que resume o propósito do Dialog. Pode ou não conter descrição.
2. Slot (Opcional)
Área destinada a inserção de um outro componente respeitando o alinhamento central e as margens internas do componente de Dialog.
3. Actions Area
Onde os botões de ação são posicionados. Recebe até 2 componentes de button, sendo um ação primária e uma secundária. A ação principal deve ser clara e visualmente destacada.
Variantes
O Dialog possui 3 variantes que definem a aparência e a disposição dos botões na actions area.
Horizontal Hug
Os botões ficam em hug e são alinhados à direita. Isso otimiza o espaço e segue padrões de desktop. Indicado para telas maiores (como desktop). A largura máxima do Dialog deve ser de 500px para evitar que a caixa se estique demais.
Horizontal Fill
Indicado para diálogos em telas menores (mobile) em casos de ênfase igual em duas ações ou onde o espaço não é uma restrição. Os botões ocupam a largura total do contêiner.
Vertical Fill
Os botões ficam em Fill e posicionados verticalmente. Utilizado quando as labels dos botões são muito longas e a disposição horizontal comprometeria a legibilidade.
Posicionamento
Dialogs de Confirmação
Quando o Dialog é acionado (ex: após um clique), ele deve aparecer centralizado na tela.
Ele é tipicamente aplicado em cima de um overlay que bloqueia a interação com o conteúdo abaixo, forçando o usuário a interagir apenas com o Dialog.
Dialogs Contextuais
Estes Dialogs não utilizam overlay.
O posicionamento é estritamente contextual, ou seja, próximo ao elemento da interface ao qual ele se refere.
Comportamento
Abertura e Fechamento
Deve ter uma transição suave (ex: fade in/out com pequena escala) para indicar que é um elemento que surge sobre a interface.
Interação com o Overlay
Para Dialogs de Confirmação, o clique fora da área do contêiner (no overlay) deve, por padrão, fechar o Dialog.
Focus
Ao ser aberto, o focus do teclado deve ser movido para o botão de ação primária ou para o primeiro elemento interativo dentro do Dialog.
Scroll
O Dialog não deve rolar com o conteúdo da página e deve permanecer fixo no local em que foi aberto. Se o conteúdo do Dialog for maior que a tela, apenas o conteúdo interno deve ter scroll.
Use cases
Histórico de Atualizações
Atualizado