El componente Ignite UI for Angular Toast proporciona información y mensajes de advertencia que se ocultan automáticamente, no son interactivos y el usuario no puede descartarlos. Las notificaciones se pueden mostrar en la parte inferior, central o superior de la página.
Para comenzar con el componente Ignite UI for Angular Toast, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:
ng add igniteui-angular
cmd
Para obtener una introducción completa a la Ignite UI for Angular, lea el tema de introducción.
El siguiente paso es importar IgxToastModule en su archivo app.module.ts.
Ahora que ha importado el módulo o componente Ignite UI for Angular Toast, puede comenzar a usar el componente igx-toast.
Using the Angular Toast
Show Toast
Para mostrar el componente brindis, use su método open() y llámelo al hacer clic en un botón. Puedes pasar el contenido del brindis dentro del elemento.
Una vez abierto, el brindis desaparece después de un período especificado por la entrada displayTime que se establece inicialmente en 4000 milisegundos. Este comportamiento está habilitado de forma predeterminada, pero puede cambiarlo configurando autoHide en false. De esta forma, la tostada queda visible. Usando el método brindis close(), puede cerrar el componente.
Si la muestra está configurada correctamente, el brindis aparecerá cuando se haga clic en el botón Mostrar. Para el primer componente, la función de ocultación automática está desactivada y el brindis desaparecerá al hacer clic en el botón "Ocultar". En los otros dos componentes puedes ver en acción cómo pasar diferentes mensajes a través del método open() y usar la proyección de contenido.
<divclass='columnWrapper'><span><h6>Toast that uses content projection</h6><buttonigxButton="contained" (click)="toast.open()">Show Toast</button><buttonigxButton="contained" (click)="toast.close()">Hide Toast</button><igx-toast #toast [autoHide]="false">Notification displayed</igx-toast></span><span><h6>Toast which dynamically changes the message text</h6><buttonigxButton="outlined" (click)="toast1.open('Hi! This is info message.')">Info Message</button><buttonigxButton="outlined" (click)="toast1.open('Hi! This is success message.')">Success Message</button><buttonigxButton="outlined" (click)="toast1.open('Hi! This is warning message.')">Warning Message</button><buttonigxButton="outlined" (click)="toast1.open('Hi! This is error message.')">Error Message</button><igx-toast #toast1 [autoHide]="true"></igx-toast></span><span><h6>Toast that uses content projection and dynamically changes the message text</h6><buttonigxButton="contained" (click)="toast2.open('You have one new message.')">Show Toast</button><buttonigxButton="contained" (click)="toast2.open('Your massage has been successfully sent.')">Show Toast with another message</button><igx-toast #toast2 [autoHide]="true"><igx-icon>mail</igx-icon></igx-toast></span></div>html
Si la muestra está configurada correctamente, el sistema se oculta automáticamente más rápido.
Positioning
Utilice la propiedad positionSettings para configurar dónde aparece el brindis. De forma predeterminada, se muestra en la parte inferior de la página. En el siguiente ejemplo, configuramos la notificación para que aparezca en la posición superior.
<!--sample.component.html--><div><buttonigxButton="contained" (click)="open(toast)">Show notification on top</button><igx-toast #toast>Notification displayed</igx-toast></div>html
<div><buttonigxButton="contained" (click)="open(toast)">Show notification on top</button><igx-toast #toast>Notification displayed</igx-toast></div>html
Estilismo
Para comenzar a diseñar el brindis, necesitamos importar el archivo de índice, donde se encuentran todas las funciones del tema y los mixins de componentes:
@use"igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:// @import '~igniteui-angular/lib/core/styles/themes/index';scss
Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el toast-theme y acepta los $background parámetros , $text-color and $border-radius.
En lugar de codificar los valores de color como acabamos de hacer, podemos lograr una mayor flexibilidad en términos de colores mediante el uso de las palette funciones y color. Consulte el Palettes tema para obtener orientación detallada sobre cómo usarlos.
El último paso es pasar el tema de brindis personalizado: