Snackbar
Snackbars fornecem mensagens breves sobre os processos de aplicativos. O componente também é conhecido como toast(torrada).
Snackbars informam aos usuários de um processo que a aplicação realizou ou irá executar. Eles aparecem temporariamente, na parte inferior da tela. They shouldn't interrupt the user experience, and they don't require user input to disappear.
Snackbars contêm uma única linha de texto diretamente relacionada à operação realizada. Eles podem conter uma ação de texto, mas não ícones. Você pode usá-los para exibir notificações.
Frequência
Apenas um snackbar pode ser exibido por vez.
Snackbars simples
Um snackbar básico que tem como objetivo reproduzir o comportamento do Google Keep's snackbar.
<Button onClick={handleClick}>Open simple snackbar</Button>
<Snackbar
open={open}
autoHideDuration={6000}
onClose={handleClose}
message="Note archived"
action={action}
/>Snackbars customizados
Aqui estão alguns exemplos de customização do componente. Você pode aprender mais sobre isso na página de documentação de sobrescritas.
<Button variant="outlined" onClick={handleClick}>
Open success snackbar
</Button>
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
<Alert onClose={handleClose} severity="success" sx={{ width: '100%' }}>
This is a success message!
</Alert>
</Snackbar>
<Alert severity="error">This is an error message!</Alert>
<Alert severity="warning">This is a warning message!</Alert>
<Alert severity="info">This is an information message!</Alert>
<Alert severity="success">This is a success message!</Alert>Snackbars posicionados
Em leiautes amplos, os snackbars podem ser alinhados para a esquerda ou alinhados ao centro se forem colocados consistentemente no mesmo lugar na parte inferior da tela, no entanto, pode haver circunstâncias em que a posição do snackbar tenha de ser mais flexível. Você pode controlar a posição do snackbar especificando a propriedade anchorOrigin.
{buttons}
<Snackbar
anchorOrigin={{ vertical, horizontal }}
open={open}
onClose={handleClose}
message="I love snacks"
key={vertical + horizontal}
/>Transições
Snackbars Consecutivos
Quando várias atualizações de snackbar são necessárias, eles devem aparecer um por vez.
Modificando a transição
Grow é a transição padrão, mas você pode usar uma diferente.
<Button onClick={handleClick(GrowTransition)}>Grow Transition</Button>
<Button onClick={handleClick(Fade)}>Fade Transition</Button>
<Button onClick={handleClick(SlideTransition)}>Slide Transition</Button>
<Snackbar
open={state.open}
onClose={handleClose}
TransitionComponent={state.Transition}
message="I love snacks"
key={state.Transition.name}
/>Controlando a direção do Slide
Você pode alterar a direção da transição do Slide.
<Button onClick={handleClick(TransitionLeft)}>Right</Button>
<Button onClick={handleClick(TransitionUp)}>Up</Button>
<Button onClick={handleClick(TransitionRight)}>Left</Button>
<Button onClick={handleClick(TransitionDown)}>Down</Button>
<Snackbar
open={open}
onClose={handleClose}
TransitionComponent={transition}
message="I love snacks"
key={transition ? transition.name : ''}
/>Projetos Complementares
Para situações de uso mais avançadas, você pode tirar proveito com:
notistack
Este exemplo demonstra como usar com notistack. notistack tem uma API imperativa que facilita a exibição de snackbars, sem ter que lidar com seu estado de aberto/fechado. Também permite que você empilhe eles em cima um do outro (embora isso não seja recomendado pela especificação do Material Design).
Acessibilidade
(WAI-ARIA: https://www.w3.org/TR/wai-aria-1.1/#alert)
- Por padrão, o snackbar não irá se esconder automaticamente. No entanto, se você decidir usar a propriedade
autoHideDuration, é recomendado dar ao usuário tempo suficiente para compreensão.