Web Components Snackbar (スナックバー)
Ignite UI for Web Components Snackbar コンポーネントは、画面の下部に簡潔なメッセージを表示することにより、操作に関するフィードバックを提供するために使用されます。
Ignite UI for Web Components Snackbar の例
このサンプルは、IgcSnackbarComponent コンポーネントを作成する方法を示しています。
使用方法
まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:
npm install igniteui-webcomponents
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 を使用すると、コンポーネント内にアクション ボタンを表示できます。
スタイル設定
IgcSnackbarComponent コンポーネントはいくつかの CSS パーツを公開し、スタイルを完全に制御できるようにします。
| 名前 | 説明 |
|---|---|
base |
スナックバー コンポーネントの基本ラッパー。 |
message |
スナックバーのメッセージ。 |
action |
デフォルトのスナックバー アクション ボタン。 |
action-container |
アクションを保持する領域。 |
igc-snackbar::part(base) {
background: var(--ig-primary-500);
border-color: var(--ig-primary-800);
color: white;
}