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ê precisará importar o IgcBannerComponent 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 Introdução.

Para exibir o componente de banner, use seu show método e chame-o com um clique de botão. O banner aparece em relação ao local onde o elemento foi inserido no modelo de página, movendo todo o outro conteúdo. Normalmente, ele mostra algum conteúdo não intrusivo que requer interação mínima 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

O IgcBannerComponent componente permite a modelagem de seu conteúdo enquanto ainda segue 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 igc-banner tag. O texto aparecerá na área de banner especificada e o banner usará seu modelo padrão ao exibi-lo. Abaixo, vamos mudar o conteúdo do nosso banner de amostra 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

Um IgcIconComponent pode ser exibido no banner usando o slot do prefix banner. O ícone sempre será 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 um IgcIconComponent para o seu banner, use o prefix 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 você quiser usar um IgcIconComponent em sua mensagem de 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>

O IgcBannerComponent expõe o actions slot para modelar os botões do banner. Isso permite que você substitua o botão de banner padrão (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 os igcClosing eventos and igcClosed ao ser fechado. O igcClosing evento é cancelável - ele usa a CustomEvent interface e o objeto emitido tem sua cancelable propriedade definida como true. Se cancelarmos o igcClosing evento, a ação final e o evento correspondentes não serão acionados - o banner não será fechado e o igcClosed evento não será emitido.

To cancel the closing event, call the preventDefault method.

<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 descartar a notificação e outro para ativar a conexão. Podemos passar manipuladores de ação personalizados usando o actions 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 Material Design do Google, um banner deve ter no máximo 2 botões presentes. O IgcBannerComponent não limita explicitamente o número de elementos sob o actions slot, mas é altamente recomendável usar até 2 se você quiser aderir às diretrizes de design de material.

A opção de dispensar (Continuar offline) não precisa de mais lógica, portanto, pode apenas chamar o hide método. A ação de confirmação (Ativar Wifi), no entanto, requer alguma lógica adicional, então temos que defini-la no componente. Em seguida, adicionaremos um ouvinte de evento para o click evento. A última etapa é chamar o refreshBanner() método em cada alteração, o que alternará o banner dependendo do wifiState.

A barra de navegação terá um ícone Wifi e adicionaremos um ouvinte de evento para seu click evento também. À medida que o refreshBanner() método é chamado em cada alteração, o ícone não apenas alternará o banner, mas mudará 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, adicionaremos um IgcToastComponent, exibindo uma mensagem sobre o estado do WiFi. Os resultados do banner modelo podem ser vistos na demonstração abaixo:

Styling

O IgcBannerComponent componente expõe várias partes CSS que oferecem 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