React Snackbar (スナックバー)
Ignite UI for React Snackbar コンポーネントは、画面の下部に簡潔なメッセージを表示することにより、操作に関するフィードバックを提供するために使用されます。
Ignite UI for React Snackbar の例
このサンプルは、IgrSnackbar コンポーネントを作成する方法を示しています。
使用方法
まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:
npm install igniteui-react
次に、以下のように、IgrSnackbar と必要な CSS をインポートする必要があります:
import { IgrSnackbar } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
Ignite UI for React の完全な概要については、作業の開始トピックを参照してください。
Snackbar コンポーネントを表示する最も簡単な方法は、show メソッドを使用して、ボタン クリックで呼び出すことです。
<IgrButton variant="contained" onClick={onShowButtonClicked}>
<span>Show Snackbar</span>
</IgrButton>
<IgrSnackbar ref={snackbarRef}>
<span>Snackbar Message</span>
</IgrSnackbar>
const snackbarRef = useRef<IgrSnackbar>(null);
const onShowButtonClicked = () => {
if (snackbarRef) {
snackbarRef.current.show();
}
}
コード例
表示時間
displayTime プロパティを使用して、Snackbar コンポーネントが表示される期間を構成します。デフォルトでは、4000 ミリ秒に設定されています。
Action Text (アクション テキスト)
デフォルトでは、Snackbar コンポーネントは、displayTime で指定された期間が経過すると自動的に非表示になります。keepOpen プロパティを使用して、この動作を変更できます。この場合、Snackbar は非表示になりません。Snackbar の actionText を使用すると、コンポーネント内にアクション ボタンを表示できます。
スタイル設定
IgrSnackbar コンポーネントはいくつかの CSS パーツを公開し、スタイルを完全に制御できるようにします。
| 名前 | 説明 |
|---|---|
base |
スナックバー コンポーネントの基本ラッパー。 |
message |
スナックバーのメッセージ。 |
action |
デフォルトのスナックバー アクション ボタン。 |
action-container |
アクションを保持する領域。 |
igc-snackbar::part(base) {
background: var(--ig-primary-500);
border-color: var(--ig-primary-800);
color: white;
}