Blazor Banner (バナー) の概要

    Ignite UI for Blazor Banner コンポーネントは、スナックバーより長い時間の表示でダイアログより控えめのメッセージを簡単に表示できます。また、メッセージのコンテキストに基づいて実行するアクションを示すこともできます。

    Ignite UI for Blazor Banner の例

    EXAMPLE
    MODULES
    RAZOR
    CSS

    このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    使用方法

    IgbBanner を使用する前に、次のように登録する必要があります:

    // in Program.cs file

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

    スタイルを IgbBanner コンポーネントに適用するには、追加の CSS ファイルをリンクする必要もあります。以下は、Blazor Web Assembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:

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

    Ignite UI for Blazor の完全な概要については、作業の開始トピックを参照してください。

    Banner コンポーネントを表示するには、ボタン クリックで Show メソッドを呼び出します。バナーは、要素がページ テンプレートに挿入された場所にその他すべてのコンテンツを移動して表示されます。通常、閉じるためのユーザー操作をほとんど必要としない非侵入型コンテンツを表示します。

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

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

@code {
    private IgbBanner bannerRef;

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

    IgbBanner には、バナーを閉じるデフォルトの OK アクション ボタンが含まれています。

    例

    IgbBanner コンポーネントは、マテリアル デザイン バナー ガイドラインにできるかぎり準拠しながらコンテンツをテンプレート化します。

    バナー メッセージの変更

    IgbBanner タグに渡されるコンテンツを変更することによりバナーに表示されるメッセージを設定できます。指定したバナー領域にテキストが表示され、表示時にバナーはデフォルト テンプレートを使用します。以下は、サンプル バナーのコンテンツを変更してより多くの情報を提供します。

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

    アイコンの追加

    バナーの prefix スロットを使用して、IgbIcon をバナーに表示できます。Icon は常にバナー メッセージの最初に配置されます。

    複数の IgbIcon 要素が挿入される場合、バナーはそれらすべてを最初に配置しようとします。IgbIcon は 1 つのみ、直接渡すことに注意してください。

    IgbIcon をバナーに渡すには、prefix スロットを使用します。

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

    バナー メッセージで IgbIcon を使用したい場合は、バナーのコンテンツに挿入するだけです。

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

    バナー ボタンの変更

    IgbBanner は、バナー ボタンをテンプレート化するための actions スロットを公開します。これにより、デフォルトのバナー ボタン (OK) をオーバーライドし、ユーザー定義のカスタム操作を追加します。

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

    EXAMPLE
    MODULES
    RAZOR
    CSS

    イベントにバインド

    バナー コンポーネントは、閉じられるときに igcClosing イベントと igcClosed イベントを発行します。igcClosing イベントはキャンセル可能です。CustomEvent インターフェイスを使用し、発行されたオブジェクトの cancelable プロパティは true に設定されています。igcClosing イベントをキャンセルすると、対応する終了アクションとイベントはトリガーされません。バナーは閉じられず、igcClosed イベントも発行されません。

    終了イベントをキャンセルするには、preventDefault メソッドを呼び出します。

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

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("handleClosing");
        }
    }
}
razor
    //In JavaScript:
function handleClosing() {
    const banner = document.getElementById('banner');

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

    上記が適用されると、終了イベントが常にキャンセルされるため、バナーが閉じることはありません。

    高度な例

    2 つのカスタムボタンのバナーを作成しましょう。1 つは通知を閉じるためのボタンで、もう 1 つは接続をオンにするためのボタンです。actions スロットを使用してカスタム アクション ハンドラーを渡すことができます。

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

    Google のマテリアル デザイン ガイドラインでは、バナーはに表示するボタンは 2 つまでです。IgbBanner は、actions スロットの要素数を明示的に制限しませんが、マテリアル デザイン ガイドに従う場合は、最大 2 つの要素を使用することを強くお勧めします。

    閉じるオプション (Continue Offline) は詳細なロジックを必要としないため、Hide のみの呼び出しが可能です。しかし、確認アクション (Turn On Wifi) は追加のロジックを必要とするため、コンポーネントで定義する必要があります。次に、click イベントのイベント リスナーを追加します。最後に、変更するたびに refreshBanner() メソッドを呼び出します。これにより、wifiState に基づいてバナーを切り替えます。

    ナビゲーション バーには Wi-Fi アイコンが表示され、その click イベントのイベント リスナーも追加されます。変更ごとに refreshBanner() メソッドが呼び出されるため、アイコンはバナーを切り替えるだけでなく、接続の状態に応じて変化します。

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

    最後に、WiFi の状態に関するメッセージを表示する IgbToast を追加します。以下はテンプレート化したバナーのデモです。

    EXAMPLE
    MODULES
    RAZOR
    CSS

    スタイル設定

    IgbBanner コンポーネントはいくつかの CSS パーツを公開し、スタイルを完全に制御できるようにします。

    名前 説明
    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);
}
css

    EXAMPLE
    MODULES
    RAZOR
    CSS

    API リファレンス

    その他のリソース