Visão geral do componente Angular Toast
O componente Ignite UI for Angular Toast fornece informações e mensagens de aviso que são ocultadas automaticamente, não interativas e não podem ser descartadas pelo usuário. As notificações podem ser exibidas na parte inferior, no meio ou no topo da página.
Angular Toast Example
Getting Started with Ignite UI for Angular Toast
Para começar a usar o componente Ignite UI for Angular Toast, 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 IgxToastModule no seu arquivo app.module.ts.
// app.module.ts
...
import { IgxToastModule } from 'igniteui-angular';
// import { IgxToastModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxToastModule],
...
})
export class AppModule {}
Como alternativa, a partir da 16.0.0 você pode importar o IgxToastComponent como uma dependência autônoma.
// home.component.ts
import { IgxToastComponent, IgxButtonDirective } from 'igniteui-angular';
// import { IgxToastComponent, IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<button igxButton="contained" (click)="toast.open()">Show notification</button>
<igx-toast #toast>Notification displayed</igx-toast>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IgxToastComponent, IgxButtonDirective]
/* or imports: [IgxTimePickerComponent, IgxButtonDirective] */
})
export class HomeComponent {
public time: Date;
}
Agora que você importou o módulo ou componente Ignite UI for Angular Toast, você pode começar a usar o componente igx-toast.
Using the Angular Toast
Show Toast
Para exibir o componente toast, use seu método open() e chame-o em um clique de botão. Você pode passar o conteúdo toast dentro do elemento.
<!--sample.component.html-->
<button igxButton="contained" (click)="toast.open()">Show notification</button>
<igx-toast #toast>Notification displayed</igx-toast>
Outra maneira de definir o conteúdo do toast é passar a mensagem diretamente como um parâmetro para o método open().
<!--sample.component.html-->
<button igxButton="contained" (click)="toast.open('Notification displayed')">Show notification</button>
<igx-toast #toast></igx-toast>
O método open() também pode ser usado no arquivo AppComponent para gerenciar o valor da mensagem.
// app.component.ts
@ViewChild('toast', { read: IgxToastComponent }) public toast: IgxToastComponent;
public message: any;
public ngOnInit() {
this.message = 'Display message';
}
public showMessage() {
this.toast.open(this.message);
}
Examples
Hide/Auto Hide
Uma vez aberto, o toast 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, o toast permanece visível. Usando o método toast close(), você pode fechar o componente.
<!--sample.component.html-->
<button igxButton="contained" (click)="toast.open()">Show Toast</button>
<button igxButton="contained" (click)="toast.close()">Hide Toast</button>
<igx-toast #toast [autoHide]="false">Notification displayed</igx-toast>
Se o exemplo estiver configurado corretamente, o toast aparecerá quando o botão Show for clicado. Para o primeiro componente, o recurso de auto-ocultação está desabilitado e o toast desaparecerá ao clicar no botão 'Hide'. Nos outros dois componentes, você pode ver em ação como passar mensagens diferentes pelo método open() e usar projeção de conteúdo.
Display Time
Use displayTime e defina-o como um intervalo em milissegundos para configurar por quanto tempo o componente toast ficará visível.
<!--sample.component.html-->
<button igxButton="contained" (click)="toast.open()">Show notification</button>
<igx-toast #toast displayTime="1000">Notification displayed</igx-toast>
Se a amostra estiver configurada corretamente, o toast oculta automaticamente mais rápido.
Positioning
Use a propriedade positionSettings para configurar onde o toast aparece. Por padrão, ele é exibido na parte inferior da página. No exemplo abaixo, definimos a notificação para aparecer na posição superior.
<!--sample.component.html-->
<div>
<button igxButton="contained" (click)="open(toast)">Show notification on top</button>
<igx-toast #toast>Notification displayed</igx-toast>
</div>
// sample.component.ts
import { VerticalAlignment } from 'igniteui-angular';
// import { VerticalAlignment } from '@infragistics/igniteui-angular'; for licensed package
...
public open(toast) {
toast.positionSettings.verticalDirection = VerticalAlignment.Top;
toast.open();
}
...
Estilização
Para começar a estilizar o toast, 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 toast-theme e aceita os parâmetros $background, $text-color e $border-radius.
$custom-toast-theme: toast-theme(
$background: #dedede,
$text-color: #151515,
$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 é passar o tema toast personalizado:
@include css-vars($custom-toast-theme);
Demo
API References
Additional Resources
Nossa comunidade é ativa e sempre acolhedora para novas ideias.
GitHub