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