Snackbar

Las snackbars (también conocdas como toasts) se utilizan para notificar brevemente los procesos que se han realizado o se van a realizar.

Introducción

El componente Snackbar aparece temporalmente y flota sobre la interfaz de usuario para proporcionar a los usuarios actualizaciones (no críticas) sobre los procesos de una aplicación. La siguiente demo, inspirada en Google Keep, muestra un Snackbar básica con un elemento de texto y dos acciones:

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

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

Press Enter to start editing

Uso

Las Snackbars se diferencian de las Alertas (Alert) en que las Snackbars tienen una posición fija y un z-index alto, por lo que están pensadas para salirse del flujo del documento; las Alertas, en cambio, suelen formar parte del flujo, excepto cuando se usan como hijos de una Snackbar.

Conceptos básicos

Importar

import Snackbar from '@u_ui/u-ui/Snackbar';

Posición

Usa la prop anchorOrigin para controlar la posición del Snackbar en la pantalla.

{buttons}
<Snackbar
  anchorOrigin={{ vertical, horizontal }}
  open={open}
  onClose={handleClose}
  message="I love snacks"
  key={vertical + horizontal}
/>

{buttons}
<Snackbar
  anchorOrigin={{ vertical, horizontal }}
  open={open}
  onClose={handleClose}
  message="I love snacks"
  key={vertical + horizontal}
/>

Press Enter to start editing

Contenido

import SnackbarContent from '@u_ui/u-ui/SnackbarContent';

Usa el componente SnackbarContent para añadir texto y acciones al Snackbar.

Me encantan los snacks.

Me encantan los dulces. Me encantan las galletas. Me encantan las magdalenas. Me encanta la tarta de queso. Me encanta el chocolate.

Me encantan los dulces. Me encantan las galletas. Me encantan las magdalenas.

Me encantan los dulces. Me encantan las galletas. Me encantan las magdalenas. Me encanta la tarta de queso. Me encanta el chocolate.

Cierre automático

Utilice la propiedad autoHideDuration para activar automáticamente la función onClose de la Snackbar tras un periodo de tiempo determinado (en milisegundos).

Asegúrese de proporcionar tiempo suficiente para que el usuario procese la información mostrada en ella.

<Button onClick={handleClick}>Abrir Snackbar</Button>
<Snackbar
  open={open}
  autoHideDuration={5000}
  onClose={handleClose}
  message="Este Snackbar se cerrará en 5 segundos."
/>

<Button onClick={handleClick}>Abrir Snackbar</Button>
<Snackbar
  open={open}
  autoHideDuration={5000}
  onClose={handleClose}
  message="Este Snackbar se cerrará en 5 segundos."
/>

Press Enter to start editing

Transiciones

Puede usar la propiedad TransitionComponent para cambiar la transición de la Snackbar de Grow (por defecto) a otras como Slide.

<Button onClick={handleClick(GrowTransition)}>Transición de crecimiento</Button>
<Button onClick={handleClick(Fade)}>Transición de desvanecimienton</Button>
<Button onClick={handleClick(SlideTransition)}>Transición de deslizamiento</Button>
<Snackbar
  open={state.open}
  onClose={handleClose}
  TransitionComponent={state.Transition}
  message="Me encantan los snacks"
  key={state.Transition.name}
  autoHideDuration={1200}
/>

<Button onClick={handleClick(GrowTransition)}>Transición de crecimiento</Button>
<Button onClick={handleClick(Fade)}>Transición de desvanecimienton</Button>
<Button onClick={handleClick(SlideTransition)}>Transición de deslizamiento</Button>
<Snackbar
  open={state.open}
  onClose={handleClose}
  TransitionComponent={state.Transition}
  message="Me encantan los snacks"
  key={state.Transition.name}
  autoHideDuration={1200}
/>

Press Enter to start editing

Personalización

Uso con Alertas

Utilice una Alerta dentro de una Snackbar para los mensajes que comunican una determinada gravedad.

<Button onClick={handleClick}>Abrir Snackbar</Button>
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
  <Alert
    onClose={handleClose}
    severity="success"
    variant="filled"
    sx={{ width: '100%' }}
  >
    ¡Esta es una Alerta de éxito dentro de un Snackbar!
  </Alert>
</Snackbar>

<Button onClick={handleClick}>Abrir Snackbar</Button>
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
  <Alert
    onClose={handleClose}
    severity="success"
    variant="filled"
    sx={{ width: '100%' }}
  >
    ¡Esta es una Alerta de éxito dentro de un Snackbar!
  </Alert>
</Snackbar>

Press Enter to start editing

Ejemplos comunes

Snackbars consecutivos

Esta demo muestra cómo mostrar varias Snackbars sin apilarlas utilizando una animación consecutiva.

Componentes suplementarios

notistack

npm downloads

Con una API imperativa, notistack te permite apilar verticalmente múltiples Snackbars sin tener que manejar sus estados de apertura y cierre. Aunque las directrices de Material Design lo desaconsejan, sigue siendo un patrón habitual.

Accesibilidad

El usuario debería poder descartar las Snackbars pulsando Escape. Si aparecen varias instancias al mismo tiempo y quieres que Escape sólo descarte la más antigua que esté abierta en ese momento, llama a event.preventDefault en la propiedad onClose.

export default function MyComponent() {
  const [open, setOpen] = React.useState(true);

  return (
    <React.Fragment>
      <Snackbar
        open={open}
        onClose={(event, reason) => {
          // `reason === 'escapeKeyDown'` si se pulsó `Escape`
          setOpen(false);
          // llama a `event.preventDefault` para cerrar sólo una Snackbar a la vez.
        }}
      />
      <Snackbar open={open} onClose={() => setOpen(false)} />
    </React.Fragment>
  );
}

Anatomía

El componente Snackbar se compone de una raíz <div> que alberga elementos interiores como el SnackbarContent y otros componentes opcionales (como botones o decoradores).

<div role="presentation" class="uiSnackbar-root">
  <div class="uiPaper-root uiSnackbarContent-root" role="alert">
    <div class="uiSnackbarContent-message">
      <!-- El contenido de la Snackbar va aquí -->
    </div>
  </div>
</div>

API

Consulte la siguiente documentación para obtener una referencia completa de todos los accesorios y clases disponibles para los componentes mencionados aquí.