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

Usage

Antes de usarlosIgbBanner, debes registrarlo de la siguiente manera:

// in Program.cs file

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

También tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbBanner componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de ensamblador web Blazor o en el archivo Pages/_Host.cshtml de 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.

Show Banner

Para mostrar el componente banner, utiliza suShow método y llámalo 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. Normalmente 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();
    }
}

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

Examples

ElIgbBanner componente permite plantar su contenido sin dejar de seguir lo más fielmente posible las directrices del banner de diseño de materiales.

Changing the banner message

Configurar el mensaje que aparece en el banner es sencillo: solo tienes que cambiar el contenido que pasas a laIgbBanner etiqueta. El texto aparecerá en el área del banner especificada y el banner usará 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>

Adding an icon

AnIgbIcon puede mostrarse en la pancarta usando la ranuraprefix de la pancarta. El icono siempre estará situado al principio del mensaje del banner.

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

Para pasar unIgbIcon a tu banner, usa laprefix 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 quieres usar unIgbIcon en tu mensaje del banner, simplemente insértalo 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>

Changing the banner button

EsoIgbBanner deja al descubierto laactions ranura para plantar los botones de la bandera. Esto te permite anular el botón de banner predeterminado (OK) y añadir 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();
    }
}

Binding to events

El componente banner emite losClosing eventos yClosed cuando está cerrado. ElClosing evento es cancelable: utiliza laCustomEvent interfaz y el objeto emitido tienecancelable su propiedad configurada como verdadera. Si cancelamos elClosing evento, la acción final y el evento correspondientes no se activarán: el banner no se cerrará ni elClosed evento se emitirá.

Para cancelar el evento de cierre, llama alpreventDefault 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] If the changes above are applied, the banner will never close, as the closing event is always cancelled.

Advanced Example

Vamos a crear un banner con dos botones personalizados: uno para cancelar la notificación y otro para activar la conexión. Podemos pasar manejadores de acciones personalizados usando laactions 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();
    }
}

Según las directrices de Diseño de Materiales de Google, un banner debe tener un máximo de 2 botones presentes. NoIgbBanner limita explícitamente el número de elementos bajo laactions ranura, pero se recomienda encarecidamente usar hasta 2 si quieres seguir las directrices de diseño del material.

La opción de despedida (Continuar desconectado) no necesita más lógica, así que puede simplemente llamar alHide método. Sin embargo, la acción de confirmar (Encender Wifi) requiere algo de lógica adicional, así que tenemos que definirla en el componente. Luego, añadiremos un oyente para elclick evento. El último paso es llamar alrefreshBanner() método en cada cambio, lo que cambiará el banner dependiendo de elwifiState.

La barra de navegación tendrá un icono de Wifi y añadiremos un oyente paraclick el evento también. A medida que se llama elrefreshBanner() método en cada cambio, el icono no solo desactiva el banner, sino que también cambia 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;
    }
}

Por último, añadiremos unIgbToast mensaje mostrando un mensaje sobre el estado del WiFi. Los resultados del banner con plantilla pueden verse en la demo a continuación:

Styling

ElIgbBanner componente expone varias partes CSS que te 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);
}

API References

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

Additional Resources

• Ignite UI for Blazor Foros
• Ignite UI for Blazor GitHub