Blazor Banner Overview

    El componente Ignite UI for Blazor Banner ofrece una manera de mostrar fácilmente un mensaje destacado a los usuarios de su aplicación de una manera menos transitoria que una barra de menú y menos intrusiva que un cuadro de diálogo. También puede indicar acciones a realizar según el contexto del mensaje.

    Ignite UI for Blazor Ejemplo de banner

    Uso

    Antes de usar el IgbBanner, debe registrarlo de la siguiente manera:

    // in Program.cs file

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

    También deberá vincular un archivo CSS adicional para aplicar el estilo al componente IgbBanner. Lo siguiente debe colocarse en el archivo wwwroot/index.html en un proyecto Blazor Web Assembly o en el archivo Pages/_Host.cshtml en un proyecto Blazor Server:

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

    Para una introducción completa al Ignite UI for Blazor, lee el tema Empezar.

    Mostrar banner

    Para mostrar el componente de banner, utilice su Show método y llámelo con un clic de botón. El banner aparece en relación con el lugar donde se insertó el elemento en la plantilla de página, moviendo todo el resto del contenido. Por lo general, muestra contenido no intrusivo que requiere una interacción mínima del usuario 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(); } }

    [! NOTA] Incluye IgbBanner un botón OK de acción predeterminado, que cierra el banner.

    Ejemplos

    El IgbBanner componente permite crear plantillas de su contenido sin dejar de ceñirse lo más posible a las directrices del banner de diseño de materiales.

    Cambiar el mensaje del banner

    Configurar el mensaje que se muestra en el banner es fácil: simplemente cambie el contenido que está pasando a la IgbBanner etiqueta. El texto se mostrará en el área del banner especificada y el banner utilizará su plantilla predeterminada al mostrarlo. A continuación, cambiaremos el contenido de nuestro banner de muestra para que sea un poco más descriptivo:

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

    Adición de un icono

    An IgbIcon se puede mostrar en el banner utilizando la ranura del prefix banner. El icono siempre se colocará al principio del mensaje de banner.

    [! NOTA] Si se insertan varios IgbIcon elementos, el banner intentará posicionarlos todos al principio. Se recomienda encarecidamente pasar solo uno IgbIcon directamente al banner.

    Para pasar un IgbIcon a tu banner, usa la prefix ranura:

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

    Si desea utilizar un IgbIcon mensaje en su banner, simplemente insértelo en el contenido del banner:

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

    Cambiar el botón del banner

    Expone IgbBanner la actions ranura para crear plantillas de los botones de banner. Esto le permite anular el botón de banner predeterminado (OK) y agregar acciones personalizadas definidas por el usuario.

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

    Vinculación a eventos

    El componente de banner emite los Closing eventos y Closed cuando se cierra. El Closing evento es cancelable: utiliza la CustomEvent interfaz y el objeto emitido tiene su cancelable propiedad establecida en true. Si cancelamos el evento, la acción final y el Closing evento correspondientes no se activarán: el banner no se cerrará y el Closed evento no se emitirá.

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

    [! NOTA] Si se aplican los cambios anteriores, el banner nunca se cerrará, ya que el evento de cierre siempre se cancela.

    Ejemplo avanzado

    Vamos a crear un banner con dos botones personalizados: uno para descartar la notificación y otro para activar la conexión. Podemos pasar controladores de acciones personalizados usando la actions ranura:

    <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 acuerdo con las directrices de diseño de materiales de Google, un banner debe tener un máximo de 2 botones presentes. No IgbBanner limita explícitamente el número de elementos debajo de la actions ranura, pero se recomienda encarecidamente usar hasta 2 si desea cumplir con las pautas de diseño de materiales.

    La opción dismiss (Continuar sin conexión) no necesita más lógica, por lo que puede llamar simplemente Hide al método. La acción de confirmación (Activar Wifi), sin embargo, requiere alguna lógica adicional, por lo que tenemos que definirla en el componente. Luego, agregaremos un detector de eventos para el click evento. El último paso es llamar refreshBanner() al método en cada cambio, que alternará el banner en función de la wifiState.

    La barra de navegación tendrá un icono de Wifi y también agregaremos un oyente de eventos para su click evento. A medida que se llama al refreshBanner() método en cada cambio, el icono no solo alternará el banner, sino que cambiará según el estado de la conexión:

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

    Finalmente, agregaremos un IgbToast, mostrando un mensaje sobre el estado de WiFi. Los resultados del banner con plantilla se pueden ver en la demostración a continuación:

    Estilismo

    El IgbBanner componente expone varias partes CSS que le dan control total sobre su estilo:

    Nombre Descripción
    base El contenedor base del componente de banner.
    spacer El envoltorio interior que establece el espacio alrededor del banner.
    message La parte que contiene el texto y la ilustración.
    illustration La parte que contiene el icono/ilustración del banner.
    content La parte que contiene el contenido del texto del banner.
    actions La parte que contiene los botones de acción del 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);
}

    Referencias de API

    Recursos adicionales