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.

    Cómo usar Ignite UI for React notificación del sistema

    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.

    The simplest way to display the toast component is to use its show method and call it on a button click.

    <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();
    };

    Ejemplos

    Propiedades

    Use the displayTime property to configure how long the toast component is visible. By default, it's set to 4000 milliseconds.

    By default, the toast component is hidden automatically after a period specified by the displayTime. You can use keepOpen property to change this behavior. In this way, the toast will remain 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;
    }
};

    Estilismo

    You can style the React IgrToast notifications directly using its tag selector:

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

    Referencias de API

    Recursos adicionales