Dialog
Diálogos informam 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.
Os diálogos são intencionalmente interruptivos, então eles 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 uma opção irá imediatamente confirmar a opção e fechar o menu
- Tocando para sair do diálogo ou pressionando a opção de voltar irá cancelar a ação e fechar o diálogo
<Typography variant="subtitle1" component="div">
Selected: {selectedValue}
</Typography>
<br />
<Button variant="outlined" onClick={handleClickOpen}>
Open simple dialog
</Button>
<SimpleDialog
selectedValue={selectedValue}
open={open}
onClose={handleClose}
/>
Alertas
Alertas são interrupções urgentes, exigindo confirmação de que o usuário esteja 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:
- Fazendo uma pergunta (Exemplo: "Apagar esta conversa?")
- Fazendo uma declaração relacionada aos botões de ação
Use alertas com 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?"
Formulário de diálogo
Os formulários de diálogo permitem que usuários preencham campos dentro de um diálogo. Por exemplo, se seu site solicita aos inscritos que preencham um 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.
O diálogo tem um botão de fechar para facilitar a utilização.
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
Os diálogos 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 um diálogo de confirmação ou pressionar Voltar, cancela a ação, descarta todas as alterações e fecha o diálogo.
Diálogo arrastável
Você pode criar um 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 todo o 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 habilitam a rolagem.
scroll=paper
o conteúdo do diálogo rola dentro do elemento.scroll=body
o conteúdo do diálogo rola dentro do corpo da página.
Experimente a demonstração abaixo para ver o que queremos dizer:
Performance
Siga a seção Performance Modal.
Limitações
Siga a seção de limitações do Modal.
Acessibilidade
Siga a seção de acessibilidade do Modal.