Blazor Banner Overview

Ignite UI for Blazor는 스낵바보다 덜 일시적이고 대화 상자보다 덜 방해가 되는 방식으로 애플리케이션 사용자에게 눈에 띄는 메시지를 쉽게 표시하는 방법을 제공합니다. 또한 메시지의 맥락에 따라 수행할 작업을 나타낼 수도 있습니다.

Ignite UI for Blazor Banner Example

Usage

Before using the IgbBanner, you need to register it as follows:

// in Program.cs file

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

You will also need to link an additional CSS file to apply the styling to the IgbBanner component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

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

Ignite UI for Blazor에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

Show Banner

In order to display the banner component, use its Show method and call it on a button click. The banner appears relative to where the element was inserted in the page template, moving all other content. It typically shows some non-intrusive content that requires minimal user interaction to be dismissed.

<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

The IgbBanner component allows templating of its content while still sticking as closely as possible to the material design banner guidelines.

Changing the banner message

Configuring the message displayed in the banner is easy - just change the content you are passing to the IgbBanner tag. The text will show up in the specified banner area and the banner will use its default template when displaying it. Below, we will change the content of our sample banner to be a bit more descriptive:

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

Adding an icon

An IgbIcon can be displayed in the banner by using the banner's prefix slot. The icon will always be positioned at the beginning of the banner message.

[!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.

To pass an IgbIcon to your banner, use the 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>

If you want to use an IgbIcon in your banner message, simply insert it in the banner's content:

<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

The IgbBanner exposes the actions slot for templating the banner buttons. This allows you to override the default banner button (OK) and add user-defined custom actions.

<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

The banner component emits the Closing and Closed events when being closed. The Closing event is cancelable - it uses the CustomEvent interface and the emitted object has its cancelable property set to true. If we cancel the Closing event, the corresponding end action and event will not be triggered - the banner will not be closed and the Closed event will not be emitted.

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] If the changes above are applied, the banner will never close, as the closing event is always cancelled.

Advanced Example

Let's create a banner with two custom buttons - one for dismissing the notification and one for turning on the connection. We can pass custom action handlers using the 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();
    }
}

According to Google's Material Design guidelines, a banner should have a maximum of 2 buttons present. The IgbBanner does not explicitly limit the number of elements under the actions slot, but it is strongly recommended to use up to 2 if you want to adhere to the material design guidelines.

The dismiss option (Continue Offline) doesn't need any further logic, so it can just call the Hide method. The confirm action (Turn On Wifi), however, requires some additional logic, so we have to define it in the component. Then, we will add an event listener for the click event. The last step is to call the refreshBanner() method on each change, which will toggle the banner depending on the wifiState.

The navbar will have a Wifi icon and we will add an event listener for its click event as well. As the refreshBanner() method is called on each change, the icon will not only toggle the banner, but change according to the state of the connection:

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

Finally, we will add a IgbToast, displaying a message about the WiFi state. The results of the templated banner can be seen in the demo below:

Styling

The IgbBanner component exposes several CSS parts which give you full control over its style:

이름	설명
base	배너 구성 요소의 기본 래퍼입니다.
spacer	배너 주위의 공간을 설정하는 내부 래퍼입니다.
message	텍스트와 일러스트레이션을 담고 있는 부분입니다.
illustration	배너 아이콘/일러스트레이션을 보유하는 부분입니다.
content	배너 텍스트 콘텐츠를 보유하는 부분입니다.
actions	배너 작업 버튼을 보유하는 부분입니다.

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 포럼
• Ignite UI for Blazor 깃허브