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. Eles não devem interromper a experiência do usuário e não exigem ação do usuário para desaparecerem.
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" className={classes.alert}>
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.