Descripción general de los componentes de Angular Toast

    El componente Ignite UI for Angular Toast proporciona información y mensajes de advertencia que se ocultan automáticamente, no interactúan y no pueden ser descartados por el usuario. Las notificaciones se pueden mostrar en la parte inferior, central o superior de la página.

    Angular Toast Example

    Getting Started with Ignite UI for Angular Toast

    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

    Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.

    El siguiente paso es importarlosIgxToastModule en tu archivo app.module.ts.

    // app.module.ts

...
import { IgxToastModule } from 'igniteui-angular';
// import { IgxToastModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxToastModule],
    ...
})
export class AppModule {}

    Alternativamente,16.0.0 puedes importarlosIgxToastComponent como una dependencia independiente.

    // home.component.ts

import { IgxToastComponent, IgxButtonDirective } from 'igniteui-angular';
// import { IgxToastComponent, IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <button igxButton="contained" (click)="toast.open()">Show notification</button>
    <igx-toast #toast>Notification displayed</igx-toast>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxToastComponent, IgxButtonDirective]
    /* or imports: [IgxTimePickerComponent, IgxButtonDirective] */
})
export class HomeComponent {
    public time: Date;
}

    Ahora que tienes importado el módulo o componente de Ignite UI for Angular Toast, puedes empezar a usar eligx-toast componente.

    Using the Angular Toast

    Show Toast

    Para mostrar el componente tostado, utiliza suopen() método y llámalo con un botón. Puedes pasar el contenido de tostadas dentro del elemento.

    <!--sample.component.html-->

<button igxButton="contained" (click)="toast.open()">Show notification</button>
<igx-toast #toast>Notification displayed</igx-toast>

    Otra forma de establecer el contenido del toast es pasar directamente el mensaje como parámetro alopen() método.

    <!--sample.component.html-->

<button igxButton="contained" (click)="toast.open('Notification displayed')">Show notification</button>
<igx-toast #toast></igx-toast>

    Elopen() método también puede usarse en el archivo AppComponent para gestionar el valor del mensaje.

    // app.component.ts
@ViewChild('toast', { read: IgxToastComponent }) public toast: IgxToastComponent;

public message: any;

public ngOnInit() {
    this.message = 'Display message';
}

public showMessage() {
    this.toast.open(this.message);
}

    Examples

    Hide/Auto Hide

    Una vez abierto, el toast desaparece tras un periodo especificado por ladisplayTime entrada, que inicialmente se establece en 4000 milisegundos. Este comportamiento está activado por defecto, pero puedes cambiarlo configurándoloautoHide en false. Así, el brindis permanece visible. Usando el método de tostadaclose(), puedes cerrar el componente.

    <!--sample.component.html-->

<button igxButton="contained" (click)="toast.open()">Show Toast</button>
<button igxButton="contained" (click)="toast.close()">Hide Toast</button>
<igx-toast #toast [autoHide]="false">Notification displayed</igx-toast>

    Si la muestra está configurada correctamente, el toast aparecerá al pulsar el botón de Mostrar. En el primer componente, la función de ocultar automáticamente está desactivada y el pan tostado desaparece 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 delopen() método y usar proyección de contenido.

    Display Time

    ÚsalodisplayTime y ponlo en un intervalo de milisegundos para configurar cuánto tiempo está visible el componente tostado.

    <!--sample.component.html-->

<button igxButton="contained" (click)="toast.open()">Show notification</button>
<igx-toast #toast displayTime="1000">Notification displayed</igx-toast>

    Si la muestra está configurada correctamente, el sistema se oculta automáticamente más rápido.

    Positioning

    UsapositionSettings la propiedad para configurar dónde aparece el toast. Por defecto, se muestra al final de la página. En el ejemplo siguiente, configuramos la notificación para que aparezca en la posición superior.

    <!--sample.component.html-->
<div>
    <button igxButton="contained" (click)="open(toast)">Show notification on top</button>
    <igx-toast #toast>Notification displayed</igx-toast>
</div>

    // sample.component.ts
import { VerticalAlignment } from 'igniteui-angular';
// import { VerticalAlignment } from '@infragistics/igniteui-angular'; for licensed package
...
public open(toast) {
    toast.positionSettings.verticalDirection = VerticalAlignment.Top;
    toast.open();
}
...

    Estilismo

    Toast Theme Property Map

    Al modificar una propiedad principal, todas las propiedades dependientes relacionadas se actualizan automáticamente para reflejar el cambio:

    Propiedad principal Propiedad dependiente Descripción
    $background $text-color El color del texto usado para el brindis.
    $text-color $border color El color del borde usado para la tostada.

    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';

    Siguiendo el enfoque más sencillo, creamos un nuevo tema que extiende lostoast-theme parámetros y proporciona los$background parámetros$text-color y$border-radius​

    $custom-toast-theme: toast-theme(
  $text-color: #ffcd0f,
  $background: #292826,
  $border-radius: 12px
);
    Note

    En lugar de codificar los valores de color como acabamos de hacer, podemos lograr mayor flexibilidad en cuanto a colores usando laspalette funciones ycolor. Por favor, consulta elPalettes tema para obtener una guía detallada sobre cómo utilizarlos.

    El último paso es pasar el tema de brindis personalizado:

    @include css-vars($custom-toast-theme);

    Demo

    Styling with Tailwind

    Puedes peinar el pan usando nuestras clases utilitarias personalizadas de Tailwind. Asegúrate de configurar primero a Tailwind.

    Junto con la importación de Tailwind en tu hoja de estilos global, puedes aplicar las utilidades de tema deseadas de la siguiente manera:

    @import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

    El archivo de utilidad incluye variantes tantolight comodark de tema.

    • Usalight-* clases para el tema ligero.
    • Usadark-* clases para el tema oscuro.
    • Añadir el nombre del componente después del prefijo, por ejemplo, ,light-toast,dark-toast.

    Una vez aplicadas, estas clases permiten cálculos dinámicos de temas. Desde ahí, puedes anular las variables CSS generadas usandoarbitrary properties. Después de los dos puntos, proporciona cualquier formato de color CSS válido (HEX, variable CSS, RGB, etc.).

    Puedes encontrar la lista completa de propiedades en el Tema IgxToast. La sintaxis es la siguiente:

    <igx-toast
  class="!light-toast ![--background:#90B69F]">
  ...
</igx-toast>
    Note

    El signo de exclamación(!) es necesario para asegurar que la clase de utilidad tenga prioridad. Tailwind aplica estilos en capas y, sin marcar estos estilos como importantes, serán anulados por el tema predeterminado del componente.

    Al final, tu tostada debería verse así:

    API References

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.