Descripción general React Toast

    React Toast es un componente emergente pequeño y súper liviano que se utiliza para mostrar el contenido de un mensaje y notificar a los usuarios finales sobre el estado de un registro modificado. Puede colocar y mostrar fácilmente las notificaciones React Toast en la parte inferior o en cualquier otra área especificada de la pantalla. O también puede descartarlas de una manera simple y fácil.

    El componente React Toast se utiliza principalmente para mensajes del sistema, notificaciones push, mensajes de advertencia e información. El usuario no puede descartarlo. Este control tiene diferentes funciones, como efectos de animación, propiedad de tiempo de visualización para configurar cuánto tiempo estará visible el componente Toast, estilos y otros.

    React Toast Example

    Observa el ejemplo simple de Ignite UI for React Toast que aparece a continuación. El mensaje de notificación animado aparece después de hacer clic en el botón.

    How To Use Ignite UI for React Toast Notification

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

    npm install igniteui-react

    Luego tendrás que importar el ReactIgrToast y su CSS necesario, así:

    import { IgrToast } 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 tostado es usar sushow método y llamarlo con un clic de botón.

    <IgrButton variant="contained" onClick={onShowButtonClicked}>
    <span>Show Toast</span>
</IgrButton>

<IgrToast ref={toastRef}>
    <span>Toast Message</span>
</IgrToast>

const toastRef = useRef<IgrToast>(null);

const onShowButtonClicked = () => {
        toastRef.current?.show();
    };

    Examples

    Properties

    Usa ladisplayTime propiedad para configurar cuánto tiempo permanece visible el componente tostado. Por defecto, está configurado en 4000 milisegundos.

    Por defecto, el componente tostado se oculta automáticamente tras un periodo especificado por eldisplayTime. Puedes usarkeepOpen la propiedad para cambiar este comportamiento. De este modo, el brindis seguirá siendo visible.

    <div>
    <IgrButton variant="contained" onClick={onToggleButtonClicked}>
        <span>Toggle Toast</span>
    </IgrButton>
    <IgrButton variant="contained" onClick={onKeepOpenButtonClicked}>
        <span>Toggle keepOpen Property</span>
    </IgrButton>
    <IgrButton variant="contained" onClick={onDisplayTimeButtonClicked}>
        <span>Set DisplayTime to 8000</span>
    </IgrButton>
</div>

<IgrToast ref={toastRef}>
    <span>Toast Message</span>
</IgrToast>

const toastRef = useRef<IgrToast>(null);

const onToggleButtonClicked = () => {
    toastRef.current?.toggle();
};

const onKeepOpenButtonClicked = () => {
    if (toastRef.current) {
        toastRef.current.keepOpen = !toastRef.current.keepOpen;
    }
};

const onDisplayTimeButtonClicked = () => {
    if (toastRef.current) {
        toastRef.current.displayTime = 8000;
    }
};

    Styling

    Puedes estilizar las notificaciones de ReactIgrToast directamente usando su selector de etiquetas:

    igc-toast {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}

    API References

    Additional Resources