Descripción general del componente Angular Snackbar

    El componente Ignite UI for Angular Snackbar proporciona comentarios sobre una operación con un mensaje de una sola línea, que puede incluir una acción. El mensaje Snackbar aparece encima de todos los demás elementos y se coloca en la parte inferior central de la pantalla.

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

    Para comenzar con el componente Ignite UI for Angular Snackbar, 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 IgxSnackbarModule en su archivo app.module.ts.

    // app.module.ts
    
    ...
    import { IgxSnackbarModule } from 'igniteui-angular';
    // import { IgxSnackbarModule } from '@infragistics/igniteui-angular'; for licensed package
    
    @NgModule({
        ...
        imports: [..., IgxSnackbarModule],
        ...
    })
    export class AppModule {}
    typescript

    Alternativamente, a partir de 16.0.0, puede importar IgxSnackbarComponent como una dependencia independiente.

    // home.component.ts
    
    import { IgxSnackbarComponent, IgxButtonDirective } from 'igniteui-angular';
    // import { IgxSnackbarComponent, IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package
    
    @Component({
        selector: 'app-home',
        template: `
        <button igxButton="contained" (click)="snackbar.open()">Delete Message</button>
        <div>
            <igx-snackbar #snackbar>Message deleted</igx-snackbar>
        </div>
        `,
        styleUrls: ['home.component.scss'],
        standalone: true,
        imports: [IgxSnackbarComponent, IgxButtonDirective]
    })
    export class HomeComponent {}
    typescript

    Ahora que tiene importado el módulo o componente Ignite UI for Angular Snackbar, puede comenzar a usar el componente igx-snackbar.

    Using the Angular Snackbar

    Show Snackbar

    Para mostrar el componente snackbar, use su método open() y llámelo haciendo clic en un botón.

    <!--sample.component.html-->
    
    <button igxButton="contained" (click)="snackbar.open()">Delete Message</button>
    <div>
        <igx-snackbar #snackbar>Message deleted</igx-snackbar>
    </div>
    html

    Si el ejemplo está configurado correctamente, debería ver el ejemplo de demostración. Aparece una barra de bocadillos que muestra un mensaje de texto cuando se hace clic en el botón. Como puede ver en el fragmento de código anterior, una forma de configurar el masaje que se muestra en la barra de refrigerios es utilizar la proyección de contenido. Pero si necesita cambiar el valor mediante programación según alguna lógica personalizada, puede simplemente pasar el valor como parámetro al método open().

    <!--sample.component.html-->
    
    <button igxButton="contained" (click)="snackbar.open('Message deleted')">Delete Message</button>
    <button igxButton="contained" (click)="snackbar.open('Message deletion was not successful. Please try again')">Delete Message</button>
    <div>
        <igx-snackbar #snackbar></igx-snackbar>
    </div>
    html

    Hide/Auto Hide

    Una vez abierta, la barra de bocadillos 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 cafetería quedará visible. Usando el método snackbar close(), puede cerrar el componente en el código.

    <!--sample.component.html-->
    
    <button igxButton="contained" (click)="snackbar.open()">Send message</button>
    <div>
      <igx-snackbar #snackbar [autoHide]="false" actionText="CLOSE" (clicked)="close(snackbar)">Message sent</igx-snackbar>
    </div>
    html
    // sample.component.ts
    
    public close(element) {
        element.close();
    }
    typescript

    Si el ejemplo está configurado correctamente, la primera barra de bocadillos aparece cuando se hace clic en el botón, mostrando tanto el mensaje como el botón de acción. La función de ocultación automática está desactivada y la barra de refrigerios desaparece al hacer clic en el botón "CERRAR". Otro snackbar pasa un mensaje diferente a través del método open() y lo oculta cuando expira el tiempo de visualización. El tercer componente pasa un mensaje como parámetro al método open() y agrega un ícono usando la proyección de contenido.

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Display Time

    Úselo displayTime y configúrelo en un intervalo en milisegundos para configurar cuánto tiempo está visible el componente de la barra de bocadillos. De forma predeterminada, como dijimos, inicialmente se establece en 4000 milisegundos.

    Customize Snackbar

    También podemos personalizar el contenido del Snackbar para mostrar elementos más complejos que un mensaje y un botón. Si queremos mostrar la snackbar mientras cargamos un archivo, por ejemplo, se podría añadir una animación de carga a su contenido.

    <!--sample.component.html-->
    <button igxButton="contained" (click)="snackbar.open()">Load file</button>
    <div>
      <igx-snackbar #snackbar displayTime="5000">File loading
        <svg id="dots" height="20px">
            <g id="dots" fill="#FFFFFF">
                <circle id="dot1" cx="5" cy="18" r="2"></circle>
                <circle id="dot2" cx="15" cy="18" r="2"></circle>
                <circle id="dot3" cx="25" cy="18" r="2"></circle>
            </g>
        </svg>
      </igx-snackbar>
    </div>
    html
    //sample.component.scss
    #dots #dot1 {
        animation: load 1s infinite;
    }
    
    #dots #dot2 {
        animation: load 1s infinite;
        animation-delay: 0.2s;
    }
    
    #dots #dot3 {
        animation: load 1s infinite;
        animation-delay: 0.4s;
    }
    
    @keyframes load {
        0% {
          opacity: 0;
        }
        50% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
    }
    scss

    Como resultado, aparecen un mensaje y tres puntos de carga en la barra de snacks.

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Snackbar in list

    Habiendo cubierto todas las características principales del snackbar, podemos integrar este componente en un escenario más interesante. Podemos utilizar el snackbar para proporcionar una notificación y la posibilidad de revertir acciones.

    Creemos una lista con contactos que se pueden eliminar. Cuando se elimina un elemento, se muestra una barra de bocadillos que contiene un mensaje y un botón para deshacer la acción.

    <!--sample.component.html-->
    <igx-list>
        <igx-list-item [isHeader]="true">Contacts</igx-list-item>
    
        <igx-list-item igxRipple="pink" igxRippleTarget=".igx-list__item" *ngFor="let item of navItems">
            <div class="item-container">
                <div class="contact">
                    <igx-avatar [src]="item.avatar" shape="circle"></igx-avatar>
                    <div class="contact__info">
                        <span class="name">{{item.text}}</span>
                    </div>
                </div>
                <span igxIconButton="flat" igxRipple igxRippleCentered="true" (click)="delete(item)">
                    <igx-icon [style.color]="'#ff5252'">delete</igx-icon>
                </span>
            </div>
    
        </igx-list-item>
    
        <igx-snackbar actionText="Undo" (clicked)="restore()">Contact deleted</igx-snackbar>
    </igx-list>
    html
    //sample.component.ts
    
    import { Component, OnInit, ViewChild } from '@angular/core';
    import { IgxSnackbarComponent } from 'igniteui-angular';
    // import { IgxSnackbarComponent } from '@infragistics/igniteui-angular'; for licensed package
    ...
    @ViewChild(IgxSnackbarComponent)
    public snackbar: IgxSnackbarComponent;
    public navItems: any[];
    public deletedItems = [];
    
    constructor() { }
    
    public ngOnInit() {
        this.navItems = [
            { avatar: 'assets/images/avatar/2.jpg', text: 'Richard Mahoney'},
            { avatar: 'assets/images/avatar/4.jpg', text: 'Lisa Landers' },
            { avatar: 'assets/images/avatar/14.jpg', text: 'Marianne Taylor' },
            { avatar: 'assets/images/avatar/17.jpg', text: 'Ward Riley' }
        ];
    }
    
    public delete(item) {
        this.deletedItems.push([item, this.navItems.indexOf(item)]);
        this.navItems.splice(this.navItems.indexOf(item), 1);
        this.snackbar.open();
    }
    
    public restore() {
        const [item, index] = this.deletedItems.pop();
        this.navItems.splice(index, 0, item);
        this.snackbar.close();
    }
    typescript

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Positioning

    Use positionSettings la propiedad para configurar dónde aparece la barra de aperitivos. 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-->
    <button igxButton="contained" (click)="open(snackbar)">Show notification on top</button>
    <igx-snackbar #snackbar>Notification displayed</igx-snackbar>
    html
    // sample.component.ts
    import { VerticalAlignment, HorizontalAlignment } from 'igniteui-angular';
    // import { VerticalAlignment, HorizontalAlignment } from '@infragistics/igniteui-angular'; for licensed package
    ...
    public open(snackbar) {
        snackbar.positionSettings.verticalDirection = VerticalAlignment.Top;
        snackbar.positionSettings.horizontalDirection = HorizontalAlignment.Right;
        snackbar.open();
    }
    ...
    typescript

    Estilismo

    Para comenzar a diseñar el snackbar, 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 snackbar-theme y acepta los parámetros $text-color, $background, $button-color y $border-radius.

    $dark-snackbar: snackbar-theme(
      $text-color: #ffcd0f,
      $background: #292826,
      $button-color: #ffcd0f,
      $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 incluir el tema del componente en nuestra aplicación.

    @include css-vars($dark-snackbar);
    scss

    Demo

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    App Builder | CTA Banner

    API References

    En este artículo aprendimos cómo usar y configurar IgxSnackbarComponent. Para obtener más detalles sobre su API, consulte los enlaces a continuación:

    Styles:

    Additional Resources

    Our community is active and always welcoming to new ideas. * [Ignite UI for Angular **Forums**](https://es.infragistics.com/community/forums/f/ignite-ui-for-angular) * [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)