Saltar al contenido

🎉 Material UI v5 is out! Head to the migration guide to get started.

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

Longitud del mensaje

Some snackbars with varying message length.

<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.

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.