Blazor Toast (トースト) の概要

Blazor Toast (トースト) は、変更されたレコードの状態をエンドユーザーに通知するメッセージコンテンツを表示するために使用される超軽量で小さなポップアップコンポーネントです。Blazor トースト通知を画面の下部またはその他の指定された領域に簡単に配置して表示できます。または、シンプルで簡単な方法でそれらを却下することもできます。

Blazor Toast コンポーネントは、主にシステムメッセージング、プッシュ通知、警告メッセージ、および情報に使用されます。ユーザーが却下することはできません。このコントロールには、アニメーション効果、トーストコンポーネントが表示される時間を構成するための表示時間プロパティ、スタイル設定などのさまざまな機能があります。

Blazor Toast の例

以下の単純な Ignite UI for Blazor Toast の例を見てください。ボタンをクリックすると、アニメーションの通知メッセージがポップアップ表示されます。

Ignite UI for Blazor のToast Notification (トースト通知) の使用方法

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

// in Program.cs file

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

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

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

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

<IgbButton @onclick=@OnToastButtonClick Variant=@ButtonVariant.Contained>Show Toast</IgbButton>
<IgbToast @ref="ToastRef">Toast Message</IgbToast>

@code {
    public IgbToast ToastRef { get; set; }

    protected override void OnInitialized()
    {
    }

    public void OnToastButtonClick(MouseEventArgs args)
    {
        if (this.ToastRef != null)
        {
            this.ToastRef.Show();
        }
    }
}

コード例

プロパティ

DisplayTime プロパティを使用して、Toast コンポーネントが表示される期間を構成します。デフォルトでは、4000 ミリ秒に設定されています。

デフォルトでは、Toast コンポーネントは、DisplayTime で指定された期間が経過すると自動的に非表示になります。KeepOpen プロパティを使用して、この動作を変更できます。このようにして、Toast は表示されたままになります。

<IgbButton @onclick=@OnToggleToastButtonClick Variant="ButtonVariant.Contained">Toggle Toast</IgbButton>
<IgbButton @onclick=@OnToggleKeepOpenButtonClick Variant="ButtonVariant.Contained">Toggle KeepOpen Property</IgbButton>
<IgbButton @onclick=@OnDisplayTimeButtonClick Variant="ButtonVariant.Contained">Set DisplayTime to 8000</IgbButton>

<IgbToast @ref=ToastRef>Toast Message</IgbToast>

@code {
    public IgbToast ToastRef{  get;  set; }

    protected override void OnInitialized()
    {
    }

    public void OnToggleToastButtonClick(MouseEventArgs args)
    {
        if (this.ToastRef != null)
        {
            this.ToastRef.Toggle();
        }
    }

    public void OnToggleKeepOpenButtonClick(MouseEventArgs args)
    {
        if (this.ToastRef != null)
        {
            this.ToastRef.KeepOpen = !this.ToastRef.KeepOpen;
        }
    }

    public void OnDisplayTimeButtonClick(MouseEventArgs args)
    {
        if (this.ToastRef != null)
        {
            this.ToastRef.DisplayTime = 8000;
        }
    }
}

スタイル設定

タグセレクターを使用して Blazor IgbToast 通知を直接スタイル設定できます。

igc-toast {
    background: #011627;
    color: #ECAA53;
    outline-color: #ECAA53;
}