React Toast (トースト) の概要

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

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

React Toast の例

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

EXAMPLE

TSX

import React, { useRef } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrButton, IgrToast } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default function ToastOverview() {
    const toastRef = useRef<IgrToast>(null);

    const onShowButtonClicked = () => {
        toastRef.current?.show();
    };

    return (
        <div className="container sample">
            <IgrButton variant="contained" onClick={onShowButtonClicked}>
                <span>Show Toast</span>
            </IgrButton>

            <IgrToast ref={toastRef}>
                <span>Toast Message</span>
            </IgrToast>
        </div>
    );
}

// rendering above function to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ToastOverview />);
tsxコピー

Edit in: Codesandbox

このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

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

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

npm install igniteui-react
cmd

次に、以下のように、React IgrToast と必要な CSS をインポートする必要があります:

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

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

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

<IgrButton variant="contained" onClick={onShowButtonClicked}>
    <span>Show Toast</span>
</IgrButton>

<IgrToast ref={toastRef}>
    <span>Toast Message</span>
</IgrToast>

const toastRef = useRef<IgrToast>(null);

const onShowButtonClicked = () => {
        toastRef.current?.show();
    };
tsx

コード例

プロパティ

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

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

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

<IgrToast ref={toastRef}>
    <span>Toast Message</span>
</IgrToast>

const toastRef = useRef<IgrToast>(null);

const onToggleButtonClicked = () => {
    toastRef.current?.toggle();
};

const onKeepOpenButtonClicked = () => {
    if (toastRef.current) {
        toastRef.current.keepOpen = !toastRef.current.keepOpen;
    }
};

const onDisplayTimeButtonClicked = () => {
    if (toastRef.current) {
        toastRef.current.displayTime = 8000;
    }
};
tsx

EXAMPLE

TSX

import React, { useRef } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrButton, IgrToast } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default function ToastProperties() {
    const toastRef = useRef<IgrToast>(null);

    const onToggleButtonClicked = () => {
        toastRef.current?.toggle();
    };

    const onKeepOpenButtonClicked = () => {
        if (toastRef.current) {
            toastRef.current.keepOpen = !toastRef.current.keepOpen;
        }
    };

    const onDisplayTimeButtonClicked = () => {
        if (toastRef.current) {
            toastRef.current.displayTime = 8000;
        }
    };

    return (
        <div className="container sample">
            <div style={{display: 'flex', justifyContent: 'space-evenly', marginTop: '20px'}}>
                <IgrButton variant="contained" onClick={onToggleButtonClicked}>
                    <span>Toggle Toast</span>
                </IgrButton>
                <IgrButton variant="contained" onClick={onKeepOpenButtonClicked}>
                    <span>Toggle keepOpen Property</span>
                </IgrButton>
                <IgrButton variant="contained" onClick={onDisplayTimeButtonClicked}>
                    <span>Set DisplayTime to 8000</span>
                </IgrButton>
            </div>

            <IgrToast ref={toastRef}>
                <span>Toast Message</span>
            </IgrToast>
        </div>
    );
}

// rendering above function to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ToastProperties />);
tsxコピー

Edit in: Codesandbox

スタイル設定

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

igc-toast {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}
css

EXAMPLE

TSX

CSS

import React, { useRef } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './ToastStyling.css';
import { IgrButton, IgrToast } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default function ToastStyling() {
    const toastRef = useRef<IgrToast>(null);

    const onShowButtonClicked = () => {
        toastRef.current?.show();
    };

    return (
        <div className="container sample">
            <IgrButton variant="contained" onClick={onShowButtonClicked}>
                <span>Show Styled Toast</span>
            </IgrButton>

            <IgrToast ref={toastRef}>
                <span>Styled Message</span>
            </IgrToast>
        </div>
    );
}

// rendering above function to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ToastStyling />);
tsxコピー

igc-toast {
    background: #011627;
    color: #ECAA53;
    outline-color: #ECAA53;
}cssコピー

Edit in: Codesandbox

API リファレンス

• IgrCalendar
• displayTime
• keepOpen
• show
• IgrToast
• スタイル設定 & テーマ

その他のリソース

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