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 issoIgxBannerModule 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 {}
Alternativamente,16.0.0 você pode importarIgxBannerComponent como uma dependência independente ou usar oIGX_BANNER_DIRECTIVES token 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 ou diretivas Ignite UI for Angular Banner, pode começar com uma configuração básica doigx-banner componente.
Using the Angular Banner Component
Show Banner
Para exibir o componente banner, use seuopen() método e chame-o com um clique no botão. O banner aparece em relação ao local onde o elemento foi inserido no modelo da página, movendo todo o restante conteúdo. Normalmente, ele mostra algum conteúdo não intrusivo que requer mínima interação 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
IncluiIgxBannerModule um botãoDismiss padrão de banner, que fecha o banner.
Examples
PermiteIgxBannerComponent a criação de modelos do conteúdo do conteúdo enquanto segue o máximo possível as diretrizes do banner de design de material.
Changing the banner message
Configurar a mensagem exibida no banner é fácil – basta mudar o conteúdo que você está passando para aigx-banner tag. O texto aparecerá na área do banner especificada e o banner usará seu template padrão ao exibi-lo. Abaixo, vamos mudar o conteúdo do nosso banner de exemplo 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
Anigx-icon pode ser exibido no banner ao passá-lo para o conteúdo do banner. O ícone sempre estará posicionado no início da mensagem do banner.
Note
Se váriosigx-icon elementos forem inseridos como descendentes diretos do estandarte, o estandarte tentará posicioná-los todos no início. É fortemente recomendado passar apenas umigx-icon diretamente para o estandarte.
Para passar umigx-icon banner para você, 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 quiser usar umigx-icon na sua mensagem do banner, envolva com umaspan tag:
<!--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
EleIgxBannerModule expõe uma diretriz para plantar os botões do banner -IgxBannerActionsDirective. Essa diretriz permite que você substitua o botão padrão do banner (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 aanimationSettings propriedade que permite aplicar animações personalizadas de abertura e fechamento. Os desenvolvedores podem escolher entre animações autodefinidas e aquelas das nossasAnimation suite. Os padrão, usados pelo banner, sãogrowVerIn para entrar egrowVerOut 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 mudar seu estado -openingeopened são chamados quando o banner é mostrado (antes e depois, respectivamente), enquantoclosing eclosed são emitidos quando o banner está fechado. Os eventos ing (opening,closing) são canceláveis - eles usam aICancelEventArgs interface e o objeto emitido possui umacancel propriedade. Se acancel propriedade for definida como true, a ação e o evento correspondentes ao final não serão acionados – por exemplo, se cancelarmosopening, o método doopen banner não será finalizado e o banner não será exibido.
Para cancelar um evento, vincule-o ao objeto emitido e defina suacancel propriedade paratrue.
<!--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 ativar a conexão. Podemos passar manipuladores de ações personalizados usando oigx-banner-actions seletor:
<!--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 doMaterial Design Google, um banner deve ter no máximo 2 botões presentes. EleIgxBannerComponent não limita explicitamente o número de elementos sob aigx-banner-actions etiqueta, mas é fortemente recomendado usar até 2 se você quiser seguir as diretrizes de design do material.
A opção de descartar ('Continue Offline') não precisa de mais lógica, então pode simplesmente chamar oclose() método. A ação de confirmação ('Turn On Wifi'), no entanto, requer alguma lógica adicional, então precisamos defini-la no componente. Depois, criaremosonNetworkStateChange o Observable e o subscreveremos. O último passo é chamar orefreshBanner() método a cada alteração, o que vai alternar o banner dependendo dowifiState
O banner também terá um ícone de WiFi na barra de navegação. À medida que a assinatura é acionada em qualquer alteraçãowifiState, o ícone não só alterna o banner, mas também muda 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, vamos adicionar umatoast mensagem exibindo sobre o estado do WiFi. Os resultados do banner template 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 obanner-theme e especifica apenas o$banner-background. Com base nesse valor, os$banner-message-color e$banner-illustration-color são automaticamente definidos como preto ou branco, dependendo de qual oferece melhor contraste com o fundo.
$custom-banner-theme: banner-theme(
$banner-background: #011627,
);
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 do banner personalizado:
@include css-vars($custom-banner-theme);
API Reference
Componentes e/ou diretivas adicionais com APIs relativas que foram usadas:
Theming Dependencies
Additional Resources
Nossa comunidade é ativa e sempre acolhedora para novas ideias.
GitHub