Descripción general del componente Angular Toast

    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.

    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 a la Ignite UI for Angular, lea el tema de introducción.

    El siguiente paso es importar IgxToastModule en su 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, a partir de 16.0.0 puede importar IgxToastComponent 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 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.

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

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

    Otra forma de configurar el contenido del brindis es pasar directamente el mensaje como parámetro al método open().

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

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

    El método open() también se puede utilizar 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);
}
    Warning

    Los métodos show y hide del componente igx-toast han quedado obsoletos. En su lugar, se deben utilizar open y close.

    Examples

    Hide/Auto Hide

    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.

    <!--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 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.

    Display Time

    Utilice displayTime y configúrelo en un intervalo en milisegundos para configurar durante cuánto tiempo estará visible el componente del sistema.

    <!--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

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

    Overlay Settings

    ​IgxToastComponent utiliza Configuración de superposición para controlar la posición de su contenedor. La configuración predeterminada se puede cambiar definiendo Custom OverlaySettings y pasándola al método brindis open():

    public customSettings: OverlaySettings = {
    positionStrategy: new GlobalPositionStrategy(
        { 
            horizontalDirection: HorizontalAlignment.Left,
            verticalDirection: VerticalAlignment.Top
        }),
    modal: true,
    closeOnOutsideClick: true,
};

toast.open(customSettings);

    Los usuarios también pueden proporcionar una salida específica donde se colocará el brindis en el DOM cuando esté visible:

    <igx-toast [outlet]="igxBodyOverlayOutlet"></igx-toast>
<div #igxBodyOverlayOutlet igxOverlayOutlet></div>

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

    Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el toast-theme y acepta los parámetros $shadow, $background, $text-color y $border-radius.

    $custom-toast-theme: toast-theme(
    $background: #dedede,
    $text-color: #151515,
    $border-radius: 12px
);

    Using CSS variables

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

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

    Using mixins

    Para diseñar componentes para navegadores más antiguos, como Internet Explorer 11, tenemos que utilizar un enfoque diferente, ya que no admite variables CSS.

    Si el componente utiliza Emulated ViewEncapsulation, es necesario penetrate esta encapsulación usando::ng-deep. Para evitar que el tema personalizado se filtre a otros componentes, asegúrese de incluir el selector:host antes de::ng-deep:

    :host {
    ::ng-deep {
        // Pass the custom toast theme to the `igx-toast` mixin
        @include toast($custom-toast-theme);
    }
}

    Using color palettes

    En lugar de codificar los valores de color, como acabamos de hacer, podemos lograr una mayor flexibilidad en términos de colores utilizando las funciones igx-palette e igx-color.

    igx-palette genera una paleta de colores basada en los colores primarios y secundarios que se pasan:

    $white-color: #dedede;
$black-color: #151515;

$light-toast-palette: palette($primary: $white-color, $secondary: $black-color);

    Y luego con igx-color podemos recuperar fácilmente el color de la paleta.

    $custom-toast-theme: toast-theme(
    $background: color($light-toast-palette, "primary", 400),
    $text-color: color($light-toast-palette, "secondary", 400),
    $border-radius: 12px
);
    Note

    ​igx-color e igx-palette son funciones potentes para generar y recuperar colores. Consulte el tema Palettes para obtener orientación detallada sobre cómo utilizarlas.

    Using schemas

    Puede crear una estructura sólida y flexible que se beneficie de los esquemas. Un esquema es una receta de un tema.

    Amplíe uno de los dos esquemas predefinidos, que se proporcionan para cada componente, en este caso, esquema light-toast:

    //  Extending the toast schema
$light-toast-schema: extend($_light-toast,
    (
        background: (
           color: ("primary", 400)
        ),
        text-color: (
           color: ("secondary", 400)
        ),
        border-radius: 12px
    )
);

    Para aplicar nuestros esquemas personalizados, tenemos que extender uno de los globales (light u dark), que básicamente señala los componentes con un esquema personalizado, y luego agregarlo a los respectivos temas de los componentes:

    // Extending the global light-schema
$custom-light-schema: extend($light-schema,(
    igx-toast: $light-toast-schema
));

// Defining toast with the global light schema
$custom-toast-theme: toast-theme(
  $palette: $light-toast-palette,
  $schema: $custom-light-schema
);

    No olvide incluir los temas de la misma manera que se demostró anteriormente.

    API References

    Additional Resources

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