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

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

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

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

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>

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>

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>

// sample.component.ts

public close(element) {
    element.close();
}

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.

Display Time

Utilice displayTime y configúrelo en un intervalo en milisegundos para configurar durante cuánto tiempo estará visible el componente de la barra de bocadillos. Por defecto, como dijimos, inicialmente está configurado 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>

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

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

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>

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

Overlay Settings

El IgxSnackbarComponent 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 snackbar open():

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

snackbar.open(customSettings);

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

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

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

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

Including themes

El último paso es incluir el tema del componente en nuestra aplicación.

Si $legacy-support está configurado en true, incluya el tema del componente así:

 @include snackbar($igx-snackbar-theme);

Note

Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrate esta encapsulación usando::ng-deep

:host {
     ::ng-deep {
        @include snackbar($igx-snackbar-theme);
    }
}

Si $legacy-support está configurado en false (predeterminado), incluya las variables CSS del componente así:

@include css-vars($igx-snackbar-theme);

Note

Si el componente utiliza una ViewEncapsulation Emulated, aún debe usar:host porque necesita un selector global para anular las variables.

:host {
    @include css-vars($igx-snackbar-theme);
}

Defining a color palette

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:

$yellow-color: #FFCD0F;
$black-color: #292826;

$dark-palette: palette($primary: $black-color, $secondary: $yellow-color);

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

$dark-snackbar: snackbar-theme(
    $text-color: color($dark-palette, "secondary", 400),
    $background: color($dark-palette, "primary", 400),
    $button-color: color($dark-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

Yendo más allá con el motor de temas, 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, el esquema dark-snackbar:

//  Extending the dark snackbar schema
$dark-snackbar-schema: extend($_dark-snackbar,
    (
        text-color:(
           color: ("secondary", 400)
        ),
        background: (
           color: ("primary", 400)
        ),
        button-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 dark-schema
$custom-dark-schema: extend($dark-schema,(
    igx-snackbar: $dark-snackbar-schema
));

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

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

Demo

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:

IgxSnackbarComponent

Styles:

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

Descripción general del componente Angular Snackbar

Angular Snackbar Example

Getting Started with Ignite UI for Angular Snackbar

Using the Angular Snackbar

Show Snackbar

Hide/Auto Hide

Display Time

Customize Snackbar

Snackbar in list

Overlay Settings

Estilismo

Including themes

Note

Note

Defining a color palette

Note

Using Schemas

Demo

API References

Additional Resources

Tematización