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 crear el componente IgrSnackbar.

    Usage

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

    npm install igniteui-react

    A continuación, tendrás que importar el IgrSnackbar y el CSS necesario, de la siguiente manera:

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

    Para obtener una introducción completa a la Ignite UI for React, lea el tema Primeros pasos.

    La forma más sencilla de mostrar el componente snackbar es utilizar su método show y llamarlo haciendo clic en un botón.

    <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

    Utilice la propiedad displayTime para configurar durante cuánto tiempo estará visible el componente snackbar. De forma predeterminada, está configurado en 4000 milisegundos.

    Action Text

    De forma predeterminada, el componente snackbar se oculta automáticamente después de un período especificado por displayTime. Puede utilizar la propiedad keepOpen para cambiar este comportamiento. De esta forma, la cafetería quedará visible. Usando el actionText de la barra de bocadillos, puede mostrar un botón de acción dentro del componente.

    Styling

    El IgrSnackbar componente expone varias partes CSS para darle 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