Snackbar
Las Snackbars proporcionan mensajes breves sobre los procesos de la aplicación. El componente también es conocido como un toast.
Snackbars informa a los usuarios de un proceso que una aplicación ha realizado o realizará. Aparecen temporalmente, hacia la parte inferior de la pantalla. No deberían interrumpir la experiencia del usuario, y no requieren que el usuario ingrese para desaparecer.
Snackbars contienen una sola línea de texto directamente relacionados con la operación realizada. Pueden contener una acción de texto, pero sin iconos. Puedes usarlos para mostrar notificaciones.
Frecuencia
Sólo se puede mostrar un snackbar a la vez.
Snackbars simples
A basic snackbar that aims to reproduce Google Keep's snackbar behavior.
Snackbars personalizadas
Here are some examples of customizing the component. Here are some examples of customizing the component.
<Button variant="outlined" onClick={handleClick}>
Open success snackbar
</Button>
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
<Alert onClose={handleClose} severity="success">
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 posicionadas
In wide layouts, snackbars can be left-aligned or center-aligned if they are consistently placed on the same spot at the bottom of the screen, however there may be circumstances where the placement of the snackbar needs to be more flexible. You can control the position of the snackbar by specifying the anchorOrigin prop.
{buttons}
<Snackbar
anchorOrigin={{ vertical, horizontal }}
open={open}
onClose={handleClose}
message="I love snacks"
key={vertical + horizontal}
/><SnackbarContent message="I love snacks." action={action} />
<SnackbarContent
message={
'I love candy. I love cookies. I love cupcakes. \
I love cheesecake. I love chocolate.'
}
/>
<SnackbarContent message="I love candy. I love cookies. I love cupcakes." action={action} />
<SnackbarContent
message={
'I love candy. I love cookies. I love cupcakes. \
I love cheesecake. I love chocolate.'
}
action={action}
/>Transiciones
Snackbars consecutivos
When multiple snackbar updates are necessary, they should appear one at a time.
Cambiar transición
Grow is the default transition but you can use a different one.
<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}
/>Controla la dirección de diapositiva
Puedes cambiar la dirección de la transición de 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 : ''}
/>Proyectos relacionados
Para usos más avanzados tal vez puedas aprovercharte de:
notistack
Este ejemplo demuestra cómo usar notistack. notistack has an imperative API that makes it easy to display snackbars, without having to handle their open/close state. It also enables you to stack them on top of one another (although this is discouraged by the Material Design specification).
Accesibilidad
(WAI-ARIA: https://www.w3.org/TR/wai-aria-1.1/#alert)
- De forma predeterminada, la barra snackbar no se ocultará automáticamente. However, if you decide to use the
autoHideDurationprop, it's recommended to give the user sufficient time to respond.