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 issoIgxToastModule 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 {}

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

    // 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 do Ignite UI for Angular Toast, pode começar a usar oigx-toast componente.

    Using the Angular Toast

    Show Toast

    Para exibir o componente tostado, use seuopen() método e chame-o com um clique no botão. Você pode passar o conteúdo de torrada dentro do elemento.

    <!--sample.component.html-->

<button igxButton="contained" (click)="toast.open()">Show notification</button>
<igx-toast #toast>Notification displayed</igx-toast>

    Outra forma de definir o conteúdo do toast é passar diretamente a mensagem como parâmetro para oopen() método.

    <!--sample.component.html-->

<button igxButton="contained" (click)="toast.open('Notification displayed')">Show notification</button>
<igx-toast #toast></igx-toast>

    Oopen() método 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 peladisplayTime entrada, que é inicialmente definido para 4000 milissegundos. Esse comportamento está ativado por padrão, mas você pode mudar isso configurandoautoHide como false. Assim, o brinde permanece visível. Usando o método da torradaclose(), 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 a amostra estiver configurada corretamente, o toast aparecerá quando o botão Mostrar for clicado. No primeiro componente, o recurso de ocultação automática está desativado e o 'toast' desaparece ao clicar no botão 'Ocultar'. Nos outros dois componentes, você pode ver em ação como passar diferentes mensagens peloopen() método e usar projeção de conteúdo.

    Display Time

    UsedisplayTime e defina para um intervalo em milissegundos para definir quanto tempo o componente toast fica 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

    UsepositionSettings a propriedade para configurar onde o toast 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-->
<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

    Toast 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 para o brinde.
    $text-cor $border cor A cor da borda usada para a torrada.

    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 ostoast-theme parâmetros e fornece os$background parâmetros$text-color e$border-radius​

    $custom-toast-theme: toast-theme(
  $text-color: #ffcd0f,
  $background: #292826,
  $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 é passar o tema toast personalizado:

    @include css-vars($custom-toast-theme);

    Demo

    Styling with Tailwind

    Você pode estilizar o toast usando nossas classes utilitárias personalizadas Tailwind. Certifique-se de configurar o Tailwind primeiro.

    Junto com a importação Tailwind na sua folha de estilos global, você pode aplicar os utilitários de tema desejados da seguinte forma:

    @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-toast,dark-toast.

    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 IgxToast. A sintaxe é a seguinte:

    <igx-toast
  class="!light-toast ![--background:#90B69F]">
  ...
</igx-toast>
    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, seu brinde deve ficar assim:

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.