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.
Ejemplo de React Toast
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.
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
Cómo usar Ignite UI for React Toast
Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:
npm install igniteui-react
cmd
Luego necesitarás importar React IgrToast, su CSS necesario y registrar su módulo, de la siguiente manera:
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 del sistema es usar su método show y llamarlo al hacer clic en un botón.
<IgrButtonvariant="contained"clicked={this.onShowButtonClicked}><span>Show Toast</span></IgrButton><IgrToastref={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();
}
}
tsx
Ejemplos
Propiedades
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><IgrButtonvariant="contained"clicked={this.onToggleButtonClicked}><span>Toggle Toast</span></IgrButton><IgrButtonvariant="contained"clicked={this.onKeepOpenButtonClicked}><span>Toggle keepOpen Property</span></IgrButton><IgrButtonvariant="contained"clicked={this.onDisplayTimeButtonClicked}><span>Set DisplayTime to 8000</span></IgrButton></div><IgrToastref={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;
}
}
tsx