Saltar al contenido
Ayuda a traducir esta página

Snackbar

Snackbars provide brief messages about app processes. El componente también es conocido como un toast.

Snackbars inform users of a process that an app has performed or will perform. Aparecen temporalmente, hacia la parte inferior de la pantalla. They shouldn't interrupt the user experience, and they don't require user input to disappear.

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.

<Button onClick={handleClick}>Open simple snackbar</Button>
<Snackbar
  open={open}
  autoHideDuration={6000}
  onClose={handleClose}
  message="Note archived"
  action={action}
/>

Snackbars personalizadas

Here are some examples of customizing the component. Puedes aprender más sobre esto en la sección Personalizando Componentes de la documentación.

<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 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}
/>

Longitud del mensaje

Some snackbars with varying message length.

Transiciones

Snackbars consecutivos

When multiple snackbar updates are necessary, they should appear one at a time.

Snackbars y botones de acción flotantes (FABs)

Snackbars should appear above FABs (on mobile).

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

estrellas descargas npm

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 autoHideDuration prop, it's recommended to give the user sufficient time to respond.

API