Lista de componentes

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 Ejemplo de tostadas

import { Component } from '@angular/core';
import { IgxButtonDirective, IgxToastComponent } from 'igniteui-angular';

@Component({
    selector: 'app-toast-sample-2',
    styleUrls: ['./toast-sample-2.component.scss'],
    templateUrl: './toast-sample-2.component.html',
    imports: [IgxButtonDirective, IgxToastComponent]
})

export class ToastSample2Component { }
ts

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

button {
    margin: 1.2% 0;
}
scss

¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

Primeros pasos con 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
cmd

Para obtener una introducción completa al 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 {}
typescript

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;
}
typescript

Ahora que ha importado el módulo o componente Ignite UI for Angular Toast, puede empezar a utilizar el igx-toast componente.

Uso de la Angular tostadas

Mostrar brindis

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

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

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);
}
typescript

Ejemplos

Ocultar/Ocultar automáticamente

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

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.

import { Component } from '@angular/core';
import { IgxButtonDirective, IgxToastComponent, IgxIconComponent } from 'igniteui-angular';

@Component({
    selector: 'app-toast-sample-3',
    styleUrls: ['./toast-sample-3.component.scss'],
    templateUrl: './toast-sample-3.component.html',
    imports: [IgxButtonDirective, IgxToastComponent, IgxIconComponent]
})

export class ToastSample3Component { }
ts

<div class='columnWrapper'>
    <span>
        <h6>Toast that uses content projection</h6>
        <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>
    </span>
    <span>
        <h6>Toast which dynamically changes the message text</h6>
        <button igxButton="outlined" (click)="toast1.open('Hi! This is info message.')">Info Message</button>
        <button igxButton="outlined" (click)="toast1.open('Hi! This is success message.')">Success Message</button>
        <button igxButton="outlined" (click)="toast1.open('Hi! This is warning message.')">Warning Message</button>
        <button igxButton="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>
        <button igxButton="contained" (click)="toast2.open('You have one new message.')">Show Toast</button>
        <button igxButton="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

.columnWrapper {
    display: flex;
    flex-flow: row;
    padding-top: 30px;
}
.columnWrapper span {
    min-width: 250px;
    flex: 1 0 0px;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
}

button {
    margin: 15px 10px 10px 0;
}
scss

Tiempo de visualización

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

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

Posicionamiento

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

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

import { Component } from '@angular/core';
import { VerticalAlignment, IgxButtonDirective, IgxToastComponent } from 'igniteui-angular';
@Component({
    selector: 'app-toast-sample-5',
    styleUrls: ['./toast-sample-5.component.scss'],
    templateUrl: './toast-sample-5.component.html',
    imports: [IgxButtonDirective, IgxToastComponent]
})

export class ToastSample5Component {
  public open(toast) {
    toast.positionSettings.verticalDirection = VerticalAlignment.Top;
    toast.open();
  }
}
ts

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

Estilo

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.

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

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:

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

Manifestación

import { Component, ElementRef } from '@angular/core';
import { IgxToastComponent, VerticalAlignment, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular';

@Component({
    selector: 'app-toast-style',
    styleUrls: ['./toast-style.component.scss'],
    templateUrl: './toast-style.component.html',
    imports: [IgxButtonDirective, IgxRippleDirective, IgxToastComponent]
})
export class ToastStyleComponent {
    public toast: IgxToastComponent;
    public position = VerticalAlignment;

    constructor(public elem: ElementRef) { }

    openToast(toast: IgxToastComponent, pos: VerticalAlignment) {
        toast.positionSettings.verticalDirection = pos;
        toast.open();
    }
}

ts

<div class="sample-wrapper">
    <section class="sample-content">
        <article class="sample-column">
            <h5 class="title">Bottom Position</h5>
            <div class="preview bottom"></div>
            <div class="btn-group">
                <button igxButton="contained" igxRipple="white" (click)="openToast(toast, position.Bottom)" [disabled]="toast.isVisible">Show Toast</button>
                <button igxButton="contained" igxRipple="white" (click)="toast.close()" [disabled]="!toast.isVisible">Hide Toast</button>
            </div>
        </article>
        <article class="sample-column">
            <h5 class="title">Middle Position</h5>
            <div class="preview middle"></div>
            <div class="btn-group">
                <button igxButton="contained" igxRipple="white" (click)="openToast(toast, position.Middle)" [disabled]="toast.isVisible">Show Toast</button>
                <button igxButton="contained" igxRipple="white" (click)="toast.close()" [disabled]="!toast.isVisible">Hide Toast</button>
            </div>
        </article>
        <article class="sample-column">
            <h5 class="title"> Top Position</h5>
            <div class="preview top"></div>
            <div class="btn-group">
                <button igxButton="contained" igxRipple="white" (click)="openToast(toast, position.Top)" [disabled]="toast.isVisible">Show Toast</button>
                <button igxButton="contained" igxRipple="white" (click)="toast.close()" [disabled]="!toast.isVisible">Hide Toast</button>
            </div>
        </article>
    </section>

    <igx-toast #toast [autoHide]="false" [outlet]="elem">This message will self-destruct in 4 seconds.</igx-toast>
</div>
html

@use "layout.scss";
@use "igniteui-angular/theming" as *;

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

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

Referencias de API

Recursos adicionales

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