Visão geral do componente Banner Angular

Angular Banner Component fornece uma maneira de exibir facilmente uma mensagem proeminente para os usuários do seu aplicativo de uma forma que seja menos transitória do que uma barra de lanches e menos intrusiva do que um diálogo. O Banner também pode ser configurado para exibir botões de ação personalizados e um ícone.

Angular Banner Example

Getting Started with Ignite UI for Angular Banner

Para começar a usar o componente Ignite UI for Angular Banner, 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 IgxBannerModule no seu arquivo app.module.ts.

// app.module.ts

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

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

Como alternativa, a partir da 16.0.0, você pode importar o IgxBannerComponent como uma dependência autônoma ou usar o token IGX_BANNER_DIRECTIVES para importar o componente e todos os seus componentes e diretivas de suporte.

// home.component.ts

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

@Component({
    selector: 'app-home',
    template: `
    <igx-banner>
        You are currently offline.
    </igx-banner>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_BANNER_DIRECTIVES]
    /* or imports: [IgxBannerComponent] */
})
export class HomeComponent {}

Agora que você importou o módulo Ignite UI for Angular Banner ou as diretivas, você pode começar com uma configuração básica do componente igx-banner.

Using the Angular Banner Component

Show Banner

Para exibir o componente banner, use seu método open() e chame-o em um clique de botão. O banner aparece em relação a onde o elemento foi inserido no modelo de página, movendo todo o outro conteúdo. Ele normalmente mostra algum conteúdo não intrusivo que requer interação mínima do usuário para ser descartado.

<!--banner.component.html-->

<igx-icon (click)="connectionBanner.open()">refresh</igx-icon>
...
<igx-banner #connectionBanner>
    You are currently offline.
</igx-banner>

Note

O IgxBannerModule inclui um botão de banner padrão, Dismiss, que fecha o banner.

Examples

O IgxBannerComponent permite a criação de modelos para seu conteúdo, mas mantendo-se o mais próximo possível das diretrizes de banner do Material Design.

Changing the banner message

Configurar a mensagem exibida no banner é fácil - basta alterar o conteúdo que você está passando para a tag igx-banner. O texto será exibido na área do banner especificada e o banner usará seu modelo padrão ao exibi-lo. Abaixo, alteraremos o conteúdo do nosso banner de amostra para ser um pouco mais descritivo:

<!--banner.component.html-->
<igx-banner #connectionBanner>
    You have lost connection to the internet. This app is offline.
</igx-banner>

Adding an icon

Um igx-icon pode ser exibido no banner passando-o para o conteúdo do banner. O ícone sempre será posicionado no começo da mensagem do banner.

Note

Se vários elementos igx-icon forem inseridos como descendentes diretos do banner, o banner tentará posicionar todos eles no começo. É altamente recomendável passar apenas um igx-icon diretamente para o banner.

Para passar um igx-icon para seu banner, basta inseri-lo no conteúdo do banner:

<!--banner.component.html-->
<igx-banner #connectionBanner>
    <igx-icon>signal_wifi_off</igx-icon>
    You have lost connection to the internet. This app is offline.
</igx-banner>

Se você quiser usar um igx-icon na sua mensagem de banner, envolva-o em uma tag span:

<!--banner.component.html-->
<igx-banner #connectionBanner>
    You have lost connection to the internet. This app is offline.
    <span>
        <igx-icon>signal_wifi_off</igx-icon>
    </span>
</igx-banner>

Changing the banner button

O IgxBannerModule expõe uma diretiva para criar modelos de botões de banner -IgxBannerActionsDirective. Esta diretiva permite que você substitua o botão de banner padrão (Dismiss) e adicione ações personalizadas definidas pelo usuário.

<!--banner.component.html-->
<igx-banner #connectionBanner>
    <igx-icon>signal_wifi_off</igx-icon>
    You have lost connection to the internet. This app is offline.
    <igx-banner-actions>
        <button igxButton igxRipple (click)="connectionBanner.toggle()">Toggle Banner</button>
    </igx-banner-actions>
</igx-banner>

Applying custom animations

O componente banner vem com a propriedade animationSettings que permite aplicar animações de abertura e fechamento personalizadas. Os desenvolvedores podem escolher entre animações autodefinidas e aquelas do nosso Animation suite. As padrões, usadas pelo banner, são growVerIn para entrar e growVerOut para sair.

Vamos mudar as animações que nosso banner usa, para que ele deslize para dentro e para fora:

<!--banner.component.html-->
<igx-banner #connectionBanner [animationSettings]="animationSettings">
    ...
</igx-banner>

// banner.component.ts
import { IgxBannerComponent, slideInLeft, slideOutRight } from 'igniteui-angular'
// import { IgxBannerComponent, slideInLeft, slideOutRight } from '@infragistics/igniteui-angular'; for licensed package
...
export class MyBannerComponent {
    ...
    public animationSettings = {
        openAnimation: slideInLeft,
        closeAnimation: slideOutRight
    }
    ...
}

Binding to events

O componente banner emite eventos ao alterar seu estado -opening e opened são chamados quando o banner é exibido (antes e depois, respectivamente), enquanto closing e closed são emitidos quando o banner é fechado. Os eventos ing (opening, closing) são canceláveis - eles usam a interface ICancelEventArgs e o objeto emitido tem uma propriedade cancel. Se a propriedade cancel for definida como true, a ação e o evento end correspondentes não serão acionados - por exemplo, se cancelarmos opening, o método open do banner não será finalizado e o banner não será exibido.

Para cancelar um evento, vincule-o ao objeto emitido e defina sua propriedade cancel como true.

<!--banner.component.html-->
    <igx-banner #connectionBanner (opening)="handleOpen($event)">
        ...
    </igx-banner>

// banner.component.ts
...
export class MyBannerComponent {
    ...
    public handleOpen(event) {
        event.cancel = true;
    }
}

Note

Se as alterações acima forem aplicadas, o banner nunca será aberto, pois o evento de abertura será sempre cancelado.

Advanced Example

Vamos criar um banner com dois botões personalizados - um para dispensar a notificação e outro para ligar a conexão. Podemos passar manipuladores de ação personalizados usando o seletor igx-banner-actions:

<!--banner.component.html-->
<igx-banner class="offline-banner" #connectionBanner [animationSettings]="animationSettings">
    <igx-icon>signal_wifi_off</igx-icon>
        You have lost connection to the internet. This app is offline.
    <igx-banner-actions>
        <button igxButton igxRipple (click)="connectionBanner.close()">Continue Offline</button>
        <button igxButton igxRipple (click)="wifiState = true">Turn On Wifi</button>
    </igx-banner-actions>
</igx-banner>

Note

De acordo com as diretrizes Material Design do Google, um banner deve ter no máximo 2 botões presentes. O IgxBannerComponent não limita explicitamente o número de elementos sob a tag igx-banner-actions, mas é altamente recomendável usar até 2 se você quiser aderir às diretrizes de material design.

A opção dismiss ( 'Continue Offline') não precisa de nenhuma lógica adicional, então ela pode simplesmente chamar o método close(). A ação confirm ( 'Turn On Wifi'), no entanto, requer alguma lógica adicional, então temos que defini-la no componente. Então, criaremos o Observable onNetworkStateChange e assinaremos. O último passo é chamar o método refreshBanner() em cada alteração, o que alternará o banner dependendo do wifiState.

O banner também terá um ícone de WiFi na barra de navegação. Conforme a assinatura dispara em qualquer alteração do wifiState, o ícone não apenas alternará o banner, mas mudará de acordo com o estado da conexão:

<!--banner.component.html-->
<igx-navbar title="Gallery">
    <igx-icon (click)="wifiState = !wifiState">
        {{ wifiState ? 'signal_wifi_4_bar' : 'signal_wifi_off' }}
    </igx-icon>
</igx-navbar>

Por fim, adicionaremos um toast, exibindo uma mensagem sobre o estado do WiFi. Os resultados do banner modelo podem ser vistos na demonstração abaixo:

Estilização

Primeiro, para usar as funções expostas pelo mecanismo de tema, precisamos importar o arquivo de índice em nosso arquivo de estilo:

@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 banner-theme e aceita os parâmetros $banner-message-color, $banner-background e $banner-illustration-color.

$custom-banner-theme: banner-theme(
  $banner-message-color: #151515,
  $banner-background: #dedede,
  $banner-illustration-color: #666666
);

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 do banner personalizado:

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

API Reference

• Componente IgxBanner
• Diretiva de Ações do IgxBanner
• Estilos de componentes IgxBanner

Componentes e/ou diretivas adicionais com APIs relativas que foram usadas:

• Componente IgxCard
• Componente IgxIcon
• Componente IgxNavbar
• Componente IgxToast

Theming Dependencies

• Tema IgxIcon
• Tema IgxButton
• Tema IgxRipple
• Tema IgxExpansionPanel

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for Angular Fóruns
• Ignite UI for Angular GitHub