Blazor Snackbar (スナックバー)
Ignite UI for Blazor Snackbar コンポーネントは、画面の下部に簡潔なメッセージを表示することにより、操作に関するフィードバックを提供するために使用されます。
Ignite UI for Blazor Snackbar の例
このサンプルは、IgbSnackbar コンポーネントを作成する方法を示しています。
使用方法
IgbSnackbar を使用する前に、次のように登録する必要があります:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbSnackbarModule));
また、追加の CSS ファイルをリンクして、スタイルを IgbSnackbar コンポーネントに適用する必要があります。以下は、Blazor Web Assembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
Ignite UI for Blazor の完全な概要については、作業の開始トピックを参照してください。
Snackbar コンポーネントを表示する最も簡単な方法は、Show メソッドを使用して、ボタン クリックで呼び出すことです。
<div class="container vertical">
<IgbButton onclick="snackbar.show()">Show Snackbar</IgbButton>
<IgbSnackbar id="snackbar"> Snackbar Message </IgbSnackbar>
</div>
コード例
表示時間
DisplayTime プロパティを使用して、Snackbar コンポーネントが表示される期間を構成します。デフォルトでは、4000 ミリ秒に設定されています。
Action Text (アクション テキスト)
デフォルトでは、Snackbar コンポーネントは、DisplayTime で指定された期間が経過すると自動的に非表示になります。KeepOpen プロパティを使用して、この動作を変更できます。この場合、Snackbar は非表示になりません。Snackbar の ActionText を使用すると、コンポーネント内にアクション ボタンを表示できます。
スタイル設定
Snackbar コンポーネントは、いくつかの CSS パーツ (base、message、および action) を公開して、そのスタイルを完全に制御できるようにします。
igc-snackbar::part(base) {
background: #0d6efd;
border-color: #0d6efd;
color: white;
}