React Snackbar

    El componente Ignite UI for React Snackbar se utiliza para proporcionar comentarios sobre una operación mostrando un breve mensaje en la parte inferior de la pantalla.

    Ignite UI for React Snackbar Example

    Este ejemplo demuestra cómo crearIgrSnackbar componentes.

    Usage

    Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

    npm install igniteui-react

    Entonces tendrás que importar elIgrSnackbar CSS necesario y su contenido, así:

    import { IgrSnackbar } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    Para una introducción completa al Ignite UI for React, lee el tema Empezar.

    La forma más sencilla de mostrar el componente de la barra de snacks es usar sushow método y llamarlo con un clic.

    <IgrButton variant="contained" onClick={onShowButtonClicked}>
    <span>Show Snackbar</span>
</IgrButton>
<IgrSnackbar ref={snackbarRef}>
    <span>Snackbar Message</span>
</IgrSnackbar>

const snackbarRef = useRef<IgrSnackbar>(null);

const onShowButtonClicked = () => {
      if (snackbarRef) {
          snackbarRef.current.show();
      }
  }

    Examples

    Display Time

    Usa ladisplayTime propiedad para configurar cuánto tiempo está visible el componente de la barra de aperitivos. Por defecto, está configurado en 4000 milisegundos.

    Action Text

    Por defecto, el componente de la barra de snacks se oculta automáticamente tras un periodo especificado por eldisplayTime. Puedes usarkeepOpen la propiedad para cambiar este comportamiento. De este modo, la barra de aperitivos seguirá siendo visible. Usando la barraactionText de snacks puedes mostrar un botón de acción dentro del componente.

    Styling

    ElIgrSnackbar componente expone varias partes CSS para darte control total sobre su estilo:

    Nombre Descripción
    base El envoltorio base del componente de la barra de aperitivos.
    message El mensaje de la cafetería.
    action El botón de acción predeterminado de la barra de aperitivos.
    action-container El área que contiene las acciones. 
    igc-snackbar::part(base) {
  background: var(--ig-primary-500);
  border-color: var(--ig-primary-800);
  color: white;
}

    API References

    Additional Resources