React Toast (トースト) の概要

React Toast (トースト) は、変更されたレコードの状態をエンドユーザーに通知するメッセージコンテンツを表示するために使用される超軽量で小さなポップアップコンポーネントです。React トースト通知を画面の下部またはその他の指定された領域に簡単に配置して表示できます。または、シンプルで簡単な方法でそれらを却下することもできます。

React Toast コンポーネントは、主にシステムメッセージング、プッシュ通知、警告メッセージ、および情報に使用されます。ユーザーが却下することはできません。このコントロールには、アニメーション効果、トーストコンポーネントが表示される時間を構成するための表示時間プロパティ、スタイル設定などのさまざまな機能があります。

React Toast の例

以下の単純な Ignite UI for React Toast の例を見てください。ボタンをクリックすると、アニメーションの通知メッセージがポップアップ表示されます。

Ignite UI for React のToast Notification (トースト通知) の使用方法

まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

npm install igniteui-react

次に、以下のように、React IgrToast とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

import { IgrToastModule, IgrToast } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrToastModule.register();

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

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

<IgrButton variant="contained" clicked={this.onShowButtonClicked}>
    <span>Show Toast</span>
</IgrButton>

<IgrToast ref={this.onToastRef}>
    <span>Toast Message</span>
</IgrToast>

public onToastRef(toast: IgrToast) {
    if (!toast) { return; }
    this.toastRef = toast;
}

public onShowButtonClicked() {
    if (this.toastRef) {
        this.toastRef.show();
    }
}

コード例

プロパティ

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

デフォルトでは、Toast コンポーネントは、displayTime で指定された期間が経過すると自動的に非表示になります。keepOpen プロパティを使用して、この動作を変更できます。このようにして、Toast は表示されたままになります。

<div>
    <IgrButton variant="contained" clicked={this.onToggleButtonClicked}>
        <span>Toggle Toast</span>
    </IgrButton>
    <IgrButton variant="contained" clicked={this.onKeepOpenButtonClicked}>
        <span>Toggle keepOpen Property</span>
    </IgrButton>
    <IgrButton variant="contained" clicked={this.onDisplayTimeButtonClicked}>
        <span>Set DisplayTime to 8000</span>
    </IgrButton>
</div>

<IgrToast ref={this.onToastRef}>
    <span>Toast Message</span>
</IgrToast>

public onToastRef(toast: IgrToast) {
    if (!toast) { return; }
    this.toastRef = toast;
}

public onToggleButtonClicked() {
    if (this.toastRef) {
        this.toastRef.toggle();
    }
}

public onKeepOpenButtonClicked() {
    if (this.toastRef) {
        this.toastRef.keepOpen = !this.toastRef.keepOpen;
    }
}

public onDisplayTimeButtonClicked() {
    if (this.toastRef) {
        this.toastRef.displayTime = 8000;
    }
}

スタイル設定

タグセレクターを使用して React IgrToast 通知を直接スタイル設定できます。

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