Blazor Toast (トースト)

    Ignite UI for Blazor Toast コンポーネントは、主にシステム メッセージ、プッシュ通知、警告メッセージ、および情報に使用されます。ユーザーが却下することはできません。

    Ignite UI for Blazor Toast の例

    このサンプルは、IgbToast コンポーネントの作成方法を示しています:

    使用方法

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

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(typeof(IgbToastModule));
    

    また、追加の 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;
            }
        }
    }
    

    スタイル設定

    タグ セレクターを直接使用して、Toast のスタイルを設定できます:

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

    API リファレンス

    その他のリソース

    API メンバー