Web Components Banner | Infragistics

O componente Banner Ignite UI for Web Components fornece uma maneira de exibir facilmente uma mensagem proeminente para os usuários do aplicativo de uma maneira menos transitória do que uma lanchonete e menos intrusiva do que uma caixa de diálogo. Ele também pode indicar ações a serem executadas com base no contexto da mensagem.

Usage

Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

npm install igniteui-webcomponents

Você então precisará importar oIgcBannerComponent CSS necessário e registrar seu módulo, assim:

import { defineComponents, IgcBannerComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcBannerComponent);

Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Comecando.

Para exibir o componente banner, use seushow 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.

<igc-button onclick="banner.show()">Show Banner</igc-button>

<igc-banner id="banner">
    You are currently offline.
</igc-banner>

[!NOTE] The IgcBannerComponent includes a default action button OK, which closes the banner.

Examples

OIgcBannerComponent componente permite a modelação de seu conteúdo enquanto segue o mais fielmente 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 aigc-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:

<igc-banner id="banner">
    You have lost connection to the internet. This app is offline.
</igc-banner>

Adding an icon

AnIgcIconComponent pode ser exibido no banner usando o slot doprefix banner. O ícone sempre estará posicionado no início da mensagem do banner.

[!NOTE] If several IgcIconComponent elements are inserted, the banner will try to position all of them at the beginning. It is strongly advised to pass only one IgcIconComponent directly to the banner.

Para passar umIgcIconComponent para o seu banner, use oprefix slot:

<igc-banner id="banner">
    <igc-icon slot="prefix" name="signal_wifi_off"></igc-icon>
    You have lost connection to the internet. This app is offline.
</igc-banner>

Se quiser usar umIgcIconComponent no seu banner, basta inseri-lo no conteúdo do banner:

<igc-banner id="banner">
    You have lost connection to the internet. This app is offline.
    <igc-icon name="signal_wifi_off"></igc-icon>
</igc-banner>

IssoIgcBannerComponent expõe oactions slot para plantar os botões do banner. Isso permite que você substitua o botão padrão do banner (OK) e adicione ações personalizadas definidas pelo usuário.

<igc-banner id="banner">
    <igc-icon slot="prefix" name="signal_wifi_off"></igc-icon>
    You have lost connection to the internet. This app is offline.
    <div slot="actions">
        <igc-button onclick="banner.toggle()">
            <igc-ripple></igc-ripple>
            Toggle Banner
        </igc-button>
    </div>
</igc-banner>

Binding to events

O componente banner emite osClosing eventos eClosed quando está fechado. OClosing evento é cancelável – ele usa aCustomEvent interface e o objeto emitido tem suacancelable propriedade definida como true. Se cancelarmos oClosing evento, a ação final e o evento correspondentes não serão acionados – o banner não será fechado e oClosed evento não será emitido.

Para cancelar o evento de encerramento, chame opreventDefault método.

<igc-banner id="banner">
    ...
</igc-banner>

const banner = document.getElementById('banner') as IgcBannerComponent;

banner.addEventListener('igcClosing', (event) => {
  event.preventDefault();
});

[!NOTE] If the changes above are applied, the banner will never close, as the closing event is always cancelled.

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 oactions slot:

<igc-banner id="banner">
    <igc-icon slot="prefix" name="signal_wifi_off"></igc-icon>
    You have lost connection to the internet. This app is offline.
    <div slot="actions">
        <igc-button onclick="banner.hide()">
            <igc-ripple></igc-ripple>
            Continue Offline
        </igc-button>
        <igc-button id="button">
            <igc-ripple></igc-ripple>
            Turn On Wifi
        </igc-button>
    </div>
</igc-banner>

De acordo com as diretrizes de Design de Materiais do Google, um banner deve ter no máximo 2 botões presentes. EleIgcBannerComponent não limita explicitamente o número de elementos sob aactions ranhura, mas é fortemente recomendado usar até 2 se você quiser seguir as diretrizes de design do material.

A opção de dispensar (Continuar offline) não precisa de mais lógica, então pode simplesmente chamar ohide método. A ação de confirmação (Ligar o Wi-Fi), no entanto, requer alguma lógica adicional, então precisamos defini-la no componente. Depois, adicionaremos um ouvinte para oclick evento. O último passo é chamar orefreshBanner() método a cada alteração, o que vai alternar o banner dependendo dowifiState

A barra de navegação terá um ícone de Wifi e também adicionaremos um ouvinte de evento para o eventoclick. À medida que orefreshBanner() método é chamado a cada alteração, o ícone não só alterna o banner, mas também muda de acordo com o estado da conexão:

<igc-navbar>
  <h1>Gallery</h1>
  <igc-icon id="icon" slot="end" name="signal_wifi_off"></igc-icon>
</igc-navbar>

<igc-banner id="banner">
    ...
    <div slot="actions">
        ...
        <igc-button id="button">
            <igc-ripple></igc-ripple>
            Turn On Wifi
        </igc-button>
    </div>
</igc-banner>

private banner: IgcBannerComponent;
private icon: IgcIconComponent;
private button: IgcButtonComponent;

private wifiState: boolean = false;

constructor() {
    this.banner = document.getElementById('banner') as IgcBannerComponent;
    this.icon = document.getElementById('icon') as IgcIconComponent;
    this.button = document.getElementById('button') as IgcButtonComponent;

    this.icon.addEventListener('click', () => this.refreshBanner());
    this.button.addEventListener('click', () => this.refreshBanner());
}

public refreshBanner() {
    if (!this.wifiState) {
        this.icon.name = 'signal_wifi_4_bar';
        this.banner.hide();
    } else {
        this.icon.name = 'signal_wifi_off';
        this.banner.show();
    }
    this.wifiState = !this.wifiState;
}

Por fim, vamos adicionar umaIgcToastComponent mensagem exibindo sobre o estado do WiFi. Os resultados do banner template podem ser vistos na demonstração abaixo:

Styling

OIgcBannerComponent componente expõe várias partes CSS que te dão controle total sobre seu estilo:

Nome	Descrição
`base`	O wrapper base do componente de banner.
`spacer`	O invólucro interno que define o espaço ao redor do banner.
`message`	A parte que contém o texto e a ilustração.
`illustration`	A parte que contém o ícone/ilustração do banner.
`content`	A parte que contém o conteúdo do texto do banner.
`actions`	A parte que contém os botões de ação do banner.

igc-banner::part(spacer) {
  background: var(--ig-surface-600);
}

igc-banner::part(illustration) {
  color: var(--ig-surface-600-contrast);
}

igc-banner::part(content) {
  color: var(--ig-gray-900);
}

Visão geral do banner Web Components

Ignite UI for Web Components Banner Example

Usage

Show Banner

Examples

Changing the banner message

Adding an icon

Changing the banner button

Binding to events

Advanced Example

Styling

API References

Additional Resources