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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

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

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

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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

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

    EXAMPLE
    MODULES
    TS
    HTML

    App Builder | CTA Banner

    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.

    $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

    Demo

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    API References

    Additional Resources

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