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 issoIgxSnackbarModule no seu arquivo app.module.ts.

// app.module.ts

...
import { IgxSnackbarModule } from 'igniteui-angular/snackbar';
// import { IgxSnackbarModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxSnackbarModule],
    ...
})
export class AppModule {}

Alternativamente,16.0.0 você pode importar comoIgxSnackbarComponent uma dependência independente.

// home.component.ts

import { IgxSnackbarComponent } from 'igniteui-angular/snackbar';
import { IgxButtonDirective } from 'igniteui-angular/directives';
// 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, pode começar a usar oigx-snackbar componente.

Using the Angular Snackbar

Show Snackbar

Para exibir o componente da lanche, use o método deleopen() e chame-o com um clique no 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 sample estiver configurado corretamente, você deve ver o sample de demonstração. Uma lanchete aparece exibindo uma mensagem de texto quando o botão é clicado. Como você pode ver no trecho de código acima, uma forma de configurar a massagem exibida no snack bar é usando a projeção de conteúdo. Mas se você precisar trocar o valor programaticamente com base em alguma lógica personalizada, pode simplesmente passar o valor como um parâmetro para oopen() 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

Uma vez aberto, o lanche desaparece após um período especificado peladisplayTime entrada, que inicialmente é ajustado para 4000 milissegundos. Esse comportamento está ativado por padrão, mas você pode mudar configurandoautoHide para false. Dessa forma, o lanches permanecerá visível. Usando o método da barraclose() de lanche, 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 a amostra estiver configurada corretamente, a primeira barra de lanche aparece quando o botão é clicado, mostrando tanto o botão de mensagem quanto o botão de ação. O recurso de ocultação automática está desativado e a barra desaparece ao clicar no botão 'FECHAR'. Outro lanche passa uma mensagem diferente peloopen() método e a esconde quando o tempo de exibição acaba. O terceiro componente passa uma mensagem como param aoopen() método e adiciona um ícone usando projeção de conteúdo.

Display Time

UsedisplayTime e defina para um intervalo em milissegundos para definir quanto tempo o componente da barra de lanche fica visível. Por padrão, como dissemos, inicialmente está configurado para 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/snackbar';
// 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

UsepositionSettings a propriedade para configurar onde o lanches aparece. Por padrão, ele é exibido na parte inferior da página. No exemplo abaixo, configuramos 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/core';
// 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

Snackbar Theme Property Map

Quando você modifica uma propriedade primária, todas as propriedades dependentes relacionadas são atualizadas automaticamente para refletir a alteração:

Propriedade primária	Propriedade dependente	Descrição
$background	$text-cor	A cor do texto usada no lanchonete
	$button cor	A cor do botão usada no lanches

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 esnackbar-theme aceita os$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

Em vez de codificar os valores de cor como acabamos de fazer, podemos alcançar maior flexibilidade em termos de cores usando aspalette funções e.color Por favor, consulte oPalettes tópico para orientações detalhadas sobre como usá-los.

O último passo é incluir o tema do componente em nosso aplicativo.

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

Demo

Styling with Tailwind

Você pode decorar o snack bar usando nossas classes utilitárias personalizadas do Tailwind. Certifique-se de configurar o Tailwind primeiro.

Junto com a importação de vento de cauda em sua folha de estilo global, você pode aplicar os utilitários de tema desejados da seguinte maneira:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

O arquivo utilitário inclui tantolight as variantes quantodark as do tema.

Uselight-* as aulas para o tema da luz.
Usedark-* classes para o tema sombrio.
Adicione o nome do componente após o prefixo, por exemplo,light-snackbar,dark-snackbar.

Uma vez aplicadas, essas classes possibilitam cálculos dinâmicos de temas. A partir daí, você pode sobrescrever as variáveis CSS geradas usandoarbitrary properties. Após os dois-pos, forneça qualquer formato de cor CSS válido (HEX, variável CSS, RGB, etc.).

Você pode encontrar a lista completa de propriedades no tema de lanches. A sintaxe é a seguinte:

<igx-snackbar
  class="!light-snackbar ![--background:#7B9E89]
  ![--button-color:#DD0D4B]">
  ...
</igx-snackbar>

Note

O ponto de exclamação(!) é necessário para garantir que a classe utilitária tenha prioridade. O Tailwind aplica estilos em camadas e, sem marcar esses estilos como importantes, eles serão substituídos pelo tema padrão do componente.

No final, sua lanchonete deve ficar assim:

API References

Neste artigo, aprendemos como usar e configurar oIgxSnackbarComponent. Para mais detalhes sobre sua API, confira os links abaixo:

IgxSnackbarComponent

Styles:

IgxSnackbarComponent Styles

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

Visão geral do 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

Positioning

Estilização

Snackbar Theme Property Map

Note

Demo

Styling with Tailwind

Note

API References

Additional Resources

Temas