Dialog (diálogo)

As caixas de diálogo informa aos usuários sobre uma tarefa e podem conter informações críticas, exigir decisões ou envolver várias tarefas.

Uma caixa de Diálogo é um tipo de janela modal que aparece na frente do conteúdo do aplicativo para fornecer informações críticas ou solicitar uma decisão. As caixas de diálogo desativam toda a funcionalidade do aplicativo quando elas são exibidas e permanecem na tela até que sejam confirmadas, rejeitadas ou que uma ação necessária tenha sido executada.

As caixas de diálogo são intencionalmente interruptivas, então elas devem ser usados com moderação.

Diálogo simples

Diálogos simples podem fornecer detalhes adicionais ou ações sobre um item da lista. Por exemplo, eles podem exibir avatares, ícones, esclarecer subtexto ou ações ortogonais (como adicionar uma conta).

Mecanismo de Toque:

Escolhendo imediadamente uma opção confirmando a opção e fechando o menu
Tocando para sair da caixa de diálogo ou pressionando a opção de voltar cancelando a ação e fechando a caixa de diálogo

Selected: user02@gmail.com

<Typography variant="subtitle1">Selected: {selectedValue}</Typography>
<br />
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
  Open simple dialog
</Button>
<SimpleDialog selectedValue={selectedValue} open={open} onClose={handleClose} />

Alertas

Alertas são interrupções urgentes, requerendo confirmação que o usuário esta ciente da situação.

A maioria dos alertas não precisam de títulos. Eles resumem uma decisão em uma sentença ou duas por:

Fazendo uma pergunta (Exemplo: "Apagar esta conversa?")
Fazendo uma declaração relacionada aos botões de ação

Use alertas de barra de título apenas para situações de alto risco, como a potencial perda de conectividade. Os usuários devem entender as escolhas com base apenas no título e no texto do botão.

Se um título é necessário:

Use uma pergunta ou declaração clara com uma explicação na área de conteúdo, como "Apagar dados do USB?".
Evite desculpas, ambiguidade ou perguntas, algo como "Atenção!" ou "Você tem certeza?"

Transições

Você também pode trocar a transição, o próximo exemplo utiliza Slide.

Formulário de Diálogo

Os formulários de diálogo permitem que usuários preencham campos dentro de uma caixa de diálogo. Por exemplo, se seu site solicita aos inscritos para preencham endereço de e-mail, eles poderão preencher o campo de e-mail e tocar em "Enviar".

Diálogos customizados

Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de sobrescritas.

A caixa de diálogo tem um botão de fechar para facilitar a utilização.

Diálogos em tela cheia

Tamanhos opcionais

Você pode definir uma largura máxima usando um enumerador na propriedade maxWidth combinando com a propriedade booleana fullWidth. Quando a propriedade fullWidth for verdadeira, a caixa de diálogo será adaptada com base no valor definido em maxWidth.

Tela cheia responsiva

Você pode fazer um diálogo totalmente responsivo usando useMediaQuery.

import useMediaQuery from '@material-ui/core/useMediaQuery';

function MyComponent() {
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));

  return <Dialog fullScreen={fullScreen} />
}

Diálogos de confirmação

As caixas de diálogo de confirmação exigem que os usuários confirmem explicitamente suas escolhas antes que uma opção seja confirmada. Por exemplo, os usuários podem ouvir vários toques, mas apenas fazer uma seleção final ao tocar em "OK".

Tocar em “Cancelar” em uma caixa de diálogo de confirmação ou pressionar Voltar, cancela a ação, descarta todas as alterações e fecha a caixa de diálogo.

Interruptions

Phone ringtone

Dione

Default notification ringtone

Tethys

Diálogo arrastável

Você pode criar uma caixa de diálogo arrastável usando react-draggable. Para fazer isso, você deve passar o componente importado Draggable como PaperComponent do componente Dialog. Isso fará com que toda a caixa de diálogo seja arrastável.

Rolagem de conteúdo longo

Quando os diálogos se tornam muito longos para a janela de visualização (viewport) ou dispositivo do usuário, eles rolam.

scroll=paper o conteúdo da caixa de diálogo rola dentro do elemento.
scroll=body o conteúdo da caixa de diálogo rola dentro do corpo da página.

Experimente a demonstração abaixo para ver o que queremos dizer:

Limitações

Siga a seção de limitações do Modal.

Acessibilidade

Siga a seção de Acessibilidade Modal.