Web Components Toast (トースト) の概要

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

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

Web Components Toast の例

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

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

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

npm install igniteui-webcomponents

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

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

defineComponents(IgcToastComponent);

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

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

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

コード例

プロパティ

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

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

<igc-button onclick="toast.toggle()" variant="contained">Toggle Toast</igc-button>
<igc-button onclick="toast.keepOpen = !toast.keepOpen" variant="contained">Toggle keepOpen property</igc-button>
<igc-button onclick="toast.displayTime = 8000" variant="contained">Set DisplayTime to 8000</igc-button>

<igc-toast id="toast">Toast Message</igc-toast>

スタイル設定

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

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

API リファレンス

その他のリソース

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