Web Components Snackbar (スナックバー)

Ignite UI for Web Components Snackbar コンポーネントは、画面の下部に簡潔なメッセージを表示することにより、操作に関するフィードバックを提供するために使用されます。

Ignite UI for Web Components Snackbar の例

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

使用方法

まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:

npm install igniteui-webcomponents

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

import { defineComponents, IgcSnackbarComponent } from 'igniteui-webcomponents';

defineComponents(IgcSnackbarComponent);

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

Snackbar コンポーネントを表示する最も簡単な方法は、Show メソッドを使用して、ボタン クリックで呼び出すことです。

<igc-button onclick="snackbar.show()" variant="contained">Show Snackbar</igc-button>
<igc-snackbar id="snackbar">Snackbar Message</igc-snackbar>

コード例

表示時間

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

Action Text (アクション テキスト)

デフォルトでは、Snackbar コンポーネントは、DisplayTime で指定された期間が経過すると自動的に非表示になります。KeepOpen プロパティを使用して、この動作を変更できます。この場合、Snackbar は非表示になりません。Snackbar の ActionText を使用すると、コンポーネント内にアクション ボタンを表示できます。

スタイル設定

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

igc-snackbar::part(base) {
  background: var(--ig-primary-500);
  border-color: var(--ig-primary-800);
  color: white;
}

API リファレンス

その他のリソース

• Ignite UI for Web Components フォーラム (英語)
• Ignite UI for Web Components GitHub (英語)