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 del sistema React en la parte inferior o en cualquier otra área especificada de la pantalla. O también puedes descartarlos de una forma sencilla y fácil.

    El componente React Toast se utiliza principalmente para mensajes del sistema, notificaciones automáticas, mensajes de advertencia e información. No puede ser descartado por el usuario. Este control tiene diferentes características como efectos de animación, propiedad de tiempo de visualización para configurar cuánto tiempo está visible el componente del sistema, estilo y otras.

    React Toast Example

    Eche un vistazo al ejemplo simple Ignite UI for React Toast 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, debe instalar el paquete Ignite UI for React npm correspondiente ejecutando el siguiente comando:

    npm install igniteui-react

    Luego necesitarás importar React IgrToast, su CSS necesario y registrar su módulo, así:

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

IgrToastModule.register();

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

    La forma más sencilla de mostrar el componente del sistema es usar su método show y llamarlo al hacer clic en un botón.

    <IgrButton variant="contained" clicked={this.onShowButtonClicked}>
    <span>Show Toast</span>
</IgrButton>

<IgrToast ref={this.onToastRef}>
    <span>Toast Message</span>
</IgrToast>

public onToastRef(toast: IgrToast) {
    if (!toast) { return; }
    this.toastRef = toast;
}

public onShowButtonClicked() {
    if (this.toastRef) {
        this.toastRef.show();
    }
}

    Examples

    Properties

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

    De forma predeterminada, el componente del sistema 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 tostada quedará visible.

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

<IgrToast ref={this.onToastRef}>
    <span>Toast Message</span>
</IgrToast>

public onToastRef(toast: IgrToast) {
    if (!toast) { return; }
    this.toastRef = toast;
}

public onToggleButtonClicked() {
    if (this.toastRef) {
        this.toastRef.toggle();
    }
}

public onKeepOpenButtonClicked() {
    if (this.toastRef) {
        this.toastRef.keepOpen = !this.toastRef.keepOpen;
    }
}

public onDisplayTimeButtonClicked() {
    if (this.toastRef) {
        this.toastRef.displayTime = 8000;
    }
}

    Styling

    Puede diseñar las notificaciones React IgrToast directamente usando su selector de etiquetas:

    igc-toast {
    background: #011627;
    color: #ECAA53;
    outline-color: #ECAA53;
}

    API References

    Additional Resources