Descripción general del componente Snackbar Angular
El componente Ignite UI for Angular Snackbar proporciona información sobre una operación con un mensaje de una sola línea, que puede incluir una acción. El mensaje de Snackbar aparece por 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 al Ignite UI for Angular, lea el tema de introducción.
El siguiente paso es importarlosIgxSnackbarModule en tu 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,16.0.0 puedes importarlosIgxSnackbarComponent 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 tienes importado el módulo o componente Ignite UI for Angular Snackbar, puedes empezar a usar eligx-snackbar componente.
Using the Angular Snackbar
Show Snackbar
Para mostrar el componente de la barra de snacks, utiliza suopen() método y aclámalo con un clic.
<!--sample.component.html-->
<button igxButton="contained" (click)="snackbar.open()">Delete Message</button>
<div>
<igx-snackbar #snackbar>Message deleted</igx-snackbar>
</div>
Si la muestra está configurada correctamente, deberías ver la muestra de demostración. Aparece una barra de aperitivos que muestra un mensaje de texto al pulsar el botón. Como puedes ver en el fragmento de código anterior, una forma de configurar el masaje que se muestra en la barra de snacks es usar la proyección de contenido. Pero si necesitas cambiar el valor programáticamente basándote en alguna lógica personalizada, puedes simplemente pasar el valor como parámetro alopen() método.
<!--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 abierto, la barra de snacks desaparece tras un periodo especificado por ladisplayTime entrada, que inicialmente se establece en 4000 milisegundos. Este comportamiento está activado por defecto, pero puedes cambiarlo poniéndoloautoHide en false. De este modo, la barra de aperitivos seguirá siendo visible. Usando el método de la barraclose() de snacks, puedes 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 la muestra está configurada correctamente, la primera barra de snacks aparece al pulsar el botón, mostrando tanto el botón de mensaje como el botón de acción. La función de ocultar automáticamente está desactivada y la barra de snacks desaparece al hacer clic en el botón de 'CERRAR'. Otra cafetiera pasa un mensaje diferente por elopen() método y lo oculta cuando expira el tiempo de visualización. El tercer componente pasa un mensaje como parámetro alopen() método y añade un icono usando proyección de contenido.
Display Time
ÚsalodisplayTime y ponlo en un intervalo de milisegundos para configurar cuánto tiempo está visible el componente de la barra de aperitivos. Por defecto, como hemos dicho, 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();
}
Positioning
UsapositionSettings la propiedad para configurar dónde aparece la barra de aperitivos. Por defecto, se muestra al final de la página. En el ejemplo siguiente, 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>
// 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();
}
...
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 sencillo, creamos un nuevo tema que extiende lossnackbar-theme y acepta los$text-color parámetros.$background$button-color$border-radius
$dark-snackbar: snackbar-theme(
$text-color: #ffcd0f,
$background: #292826,
$button-color: #ffcd0f,
$border-radius: 12px
);
Note
En lugar de codificar los valores de color como acabamos de hacer, podemos lograr mayor flexibilidad en cuanto a colores usando laspalette funciones ycolor. Por favor, consulta elPalettes tema para obtener una guía detallada sobre cómo utilizarlos.
El último paso es incluir el tema del componente en nuestra aplicación.
@include css-vars($dark-snackbar);
Demo
API References
En este artículo hemos aprendido a usar y configurar elIgxSnackbarComponent. Para más detalles sobre su API, echa un vistazo a 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)
GitHub