Blazor Banner Overview

O componente Banner Ignite UI for Blazor 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.

Ignite UI for Blazor Banner Example

Usage

Antes de usá-losIgbBanner, você precisa registrá-los da seguinte forma:

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbBannerModule));

Você também precisará vincular um arquivo CSS adicional para aplicar o estilo aoIgbBanner componente. O seguinte deve ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

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

Show Banner

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.

<IgbButton @onclick="ShowBanner">Show Banner</IgbButton>

<IgbBanner @ref="bannerRef">
    You are currently offline.
</IgbBanner>

@code {
    private IgbBanner bannerRef;

    private void ShowBanner()
    {
        this.bannerRef.ShowAsync();
    }
}

Note

IncluiIgbBanner um botãoOK de ação padrão, que fecha o banner.

Examples

OIgbBanner 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 aIgbBanner 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:

<IgbBanner @ref="bannerRef">
    You have lost connection to the internet. This app is offline.
</IgbBanner>

Adding an icon

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

Note

Se váriosIgbIcon elementos forem inseridos, o banner tentará posicionar todos eles no início. É fortemente recomendado passar apenas umIgbIcon diretamente para o estandarte.

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

<IgbBanner @ref="bannerRef">
    <IgbIcon slot="prefix" IconName="signal_wifi_off" Collection="material"></IgbIcon>
    You have lost connection to the internet. This app is offline.
</IgbBanner>

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

<IgbBanner @ref="bannerRef">
    You have lost connection to the internet. This app is offline.
    <IgbIcon IconName="signal_wifi_off" Collection="material"></IgbIcon>
</IgbBanner>

Changing the banner button

IssoIgbBanner 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.

<IgbBanner @ref="bannerRef">
    <IgbIcon slot="prefix" IconName="signal_wifi_off" Collection="material"></IgbIcon>
    You have lost connection to the internet. This app is offline.
    <div slot="actions">
        <IgbButton Variant="ButtonVariant.Flat" @onclick="OnButtonClick">
            Toggle Banner
            <IgbRipple />
        </IgbButton>
    </div>
</IgbBanner>

@code {
    private IgbBanner bannerRef;

    private void OnButtonClick()
    {
        this.bannerRef.ToggleAsync();
    }
}

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.

<IgbBanner id="banner">
    ...
</IgbBanner>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("handleClosing");
        }
    }
}

//In JavaScript:
function handleClosing() {
    const banner = document.getElementById('banner');

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

Note

Se as alterações acima forem aplicadas, o banner nunca será fechado, pois o evento de encerramento é 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 oactions slot:

<IgbBanner @ref="bannerRef">
    <IgbIcon IconName="signal_wifi_off" Collection="material" slot="prefix"></IgbIcon>
    You have lost connection to the internet. This app is offline.
    <div slot="actions">
        <IgbButton Variant="ButtonVariant.Flat" @onclick="HideBanner">
            Continue Offline
            <IgbRipple />
        </IgbButton>
        <IgbButton Variant="ButtonVariant.Flat" @onclick="RefreshBanner">
            Turn On Wifi
            <IgbRipple />
        </IgbButton>
    </div>
</IgbBanner>

@code {
    private IgbBanner bannerRef;

    private void HideBanner()
    {
        this.bannerRef.HideAsync();
    }
}

De acordo com as diretrizes de Design de Materiais do Google, um banner deve ter no máximo 2 botões presentes. EleIgbBanner 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:

<IgbNavbar>
    <h1>Gallery</h1>
    <IgbIcon @ref="iconRef" IconName="@iconName" Collection="material" slot="end" @onclick="RefreshBanner"></IgbIcon>
</IgbNavbar>

<IgbBanner @ref="bannerRef">
    ...
    <div slot="actions">
        ...
        <IgbButton Variant="ButtonVariant.Flat" @onclick="RefreshBanner">
            Turn On Wifi
            <IgbRipple />
        </IgbButton>
    </div>
</IgbBanner>

@code {
    private IgbBanner bannerRef;
    private string iconName = "signal_wifi_off";
    private bool wifiState = false;

    private void RefreshBanner()
    {
        if (!this.wifiState)
        {
            this.iconName = "signal_wifi_4_bar";
            this.bannerRef.HideAsync();
        }
        else
        {
            this.iconName = "signal_wifi_off";
            this.bannerRef.ShowAsync();
        }
        this.wifiState = !this.wifiState;
    }
}

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

Styling

OIgbBanner 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);
}

API References

• IgbBanner
• IgbCard
• IgbIcon
• IgbNavbar
• IgbToast
• IgbRipple
• Styling & Themes

Additional Resources

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