Visão geral do componente Angular Snackbar
O componente Snackbar Ignite UI for Angular fornece feedback sobre uma operação com uma mensagem de linha única, que pode incluir uma ação. A mensagem do Snackbar aparece acima de todos os outros elementos e é posicionada na parte inferior central da tela.
Angular Snackbar Example
Getting Started with Ignite UI for Angular Snackbar
Para começar a usar o componente Ignite UI for Angular Snackbar, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:
ng add igniteui-angular
Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.
O próximo passo é importar o IgxSnackbarModule no seu arquivo 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 {}
Como alternativa, a partir da 16.0.0 você pode importar o IgxSnackbarComponent como uma dependência autônoma.
// 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 {}
Agora que você importou o módulo ou componente Ignite UI for Angular Snackbar, você pode começar a usar o componente igx-snackbar.
Using the Angular Snackbar
Show Snackbar
Para exibir o componente snackbar, use seu método open() e chame-o com um clique de botão.
<!--sample.component.html-->
<button igxButton="contained" (click)="snackbar.open()">Delete Message</button>
<div>
<igx-snackbar #snackbar>Message deleted</igx-snackbar>
</div>
Se o exemplo estiver configurado corretamente, você deverá ver o exemplo de demonstração. Uma barra de lanches aparece exibindo uma mensagem de texto quando o botão é clicado. Como você pode ver no trecho de código acima, uma maneira de definir a mensagem exibida na barra de lanches é usar a projeção de conteúdo. Mas se você precisar alternar o valor programaticamente com base em alguma lógica personalizada, você pode simplesmente passar o valor como um parâmetro para o 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
Uma vez aberta, a snackbar desaparece após um período especificado pela entrada displayTime que é definida inicialmente para 4000 milissegundos. Esse comportamento é habilitado por padrão, mas você pode alterá-lo definindo autoHide como false. Dessa forma, a snackbar permanecerá visível. Usando o método snackbar close(), você pode fechar o componente no 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();
}
Se o exemplo estiver configurado corretamente, a primeira barra de lanches aparece quando o botão é clicado, mostrando tanto a mensagem quanto o botão de ação. O recurso de ocultação automática é desabilitado e a barra de lanches desaparece ao clicar no botão 'FECHAR'. Outra barra de lanches passa uma mensagem diferente pelo método open() e a oculta quando o tempo de exibição expira. O terceiro componente passa uma mensagem como um parâmetro para o método open() e adiciona um ícone usando projeção de conteúdo.
Display Time
Use displayTime e defina-o para um intervalo em milissegundos para configurar por quanto tempo o componente snackbar fica visível. Por padrão, como dissemos, ele é inicialmente definido como 4000 milissegundos.
Customize Snackbar
Também podemos personalizar o conteúdo do Snackbar para exibir elementos mais complexos do que uma mensagem e um botão. Se quisermos mostrar o snackbar enquanto carrega um arquivo, por exemplo, uma animação de carregamento pode ser adicionada ao seu conteúdo.
<!--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, uma mensagem e três pontos de carregamento aparecem na barra de ferramentas.
Snackbar in list
Tendo todos os principais recursos do snackbar cobertos, podemos integrar esse componente em um cenário mais interessante. Podemos usar o snackbar para fornecer uma notificação e a capacidade de reverter ações.
Vamos criar uma lista com contatos que podem ser deletados. Quando um item é deletado, uma barra de ferramentas é exibida contendo uma mensagem e um botão para desfazer a ação.
<!--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
Use a propriedade positionSettings para configurar onde a snackbar aparece. Por padrão, ela é exibida na parte inferior da página. No exemplo abaixo, definimos a notificação para aparecer na posição 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();
}
...
Estilização
Para começar a estilizar o snackbar, precisamos importar o arquivo index, onde todas as funções do tema e mixins de componentes estão localizados:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
Seguindo a abordagem mais simples, criamos um novo tema que estende o snackbar-theme e aceita os parâmetros $text-color, $background, $button-color e $border-radius.
$dark-snackbar: snackbar-theme(
$text-color: #ffcd0f,
$background: #292826,
$button-color: #ffcd0f,
$border-radius: 12px
);
Note
Em vez de codificar os valores de cor como acabamos de fazer, podemos obter maior flexibilidade em termos de cores usando as palette funções e color. Consulte o Palettes tópico para obter orientações detalhadas sobre como usá-los.
O último passo é incluir o tema do componente em nosso aplicativo.
@include css-vars($dark-snackbar);
Demo
API References
Neste artigo, aprendemos como usar e configurar o IgxSnackbarComponent. Para mais detalhes sobre sua API, dê uma olhada nos links abaixo:
Styles:
Additional Resources
Our community is active and always welcoming to new ideas. * [Ignite UI for Angular **Forums**](https://pt-br.infragistics.com/community/forums/f/ignite-ui-for-angular) * [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
GitHub