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 Exemplo de banner

    Uso

    Antes de usar o IgbBanner, você precisa registrá-lo 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 ao IgbBanner componente. O seguinte precisa ser colocado no arquivo wwwroot/index.html em um projeto de Assembly da Web do Blazor ou no arquivo Pages/_Host.cshtml em um projeto do Blazor Server:

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

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

    Mostrar Banner

    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.

    <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] O IgbBanner inclui um botão OK de ação padrão, que fecha o banner.

    Exemplos

    O IgbBanner componente permite a modelagem de seu conteúdo enquanto ainda segue o mais próximo possível das diretrizes de banner do Material Design.

    Alterando a mensagem do banner

    Configurar a mensagem exibida no banner é fácil - basta alterar o conteúdo que você está passando para a IgbBanner 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:

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

    Adicionando um ícone

    Um IgbIcon pode ser exibido no banner usando o slot do prefix banner. O ícone sempre será posicionado no início da mensagem do banner.

    [! NOTA] Se vários IgbIcon elementos forem inseridos, o banner tentará posicionar todos eles no início. É altamente recomendável passar apenas um IgbIcon diretamente para o banner.

    Para passar um IgbIcon para o seu banner, use o prefix 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 você quiser usar um IgbIcon em sua mensagem de 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>

    Alterando o botão de banner

    O IgbBanner 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.

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

    Associação a eventos

    O componente banner emite os Closing eventos and Closed ao ser fechado. O Closing evento é cancelável - ele usa a CustomEvent interface e o objeto emitido tem sua cancelable propriedade definida como true. Se cancelarmos o Closing evento, a ação final e o evento correspondentes não serão acionados - o banner não será fechado e o Closed evento não será emitido.

    To cancel the closing event, call the preventDefault method.

    <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 fechamento é sempre cancelado.

    Exemplo avançado

    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:

    <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 Material Design do Google, um banner deve ter no máximo 2 botões presentes. O IgbBanner 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:

    <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, adicionaremos um IgbToast, exibindo uma mensagem sobre o estado do WiFi. Os resultados do banner modelo podem ser vistos na demonstração abaixo:

    Estilização

    O IgbBanner 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);
}

    Referências de API

    Recursos adicionais