トースト通知

コンポーネントは、成功、エラー、警告などをユーザにポップアップ表示で通知するトースト通知を送信できます。単に情報を提供するだけのトーストも可能です。

Lightning Experience または Experience Cloud の Aura サイトでトースト通知を表示するには、lightning/platformShowToastEvent モジュールから ShowToastEvent をインポートします。

ShowToastEvent は、Aura サイトのログインページではサポートされていません。また、Experience Cloud の LWR サイトでは、ShowToastEvent はサポートされていません。代わりに、lightning/toastContainer モジュール (ベータ) を使用します。

lwc-recipes リポジトリにはトーストをカスタマイズして送信できるコンポーネントがあり、バリエーションを試すことができます。

LWC Recipes サンプルアプリケーションで緑色のバナーとして表示されているトースト通知。

HTML テンプレートは、スクリーンショットで示した UI を構築します。

単純に ShowToastEvent を lightning/platformShowToastEvent からインポートします。title、message、variant、および mode プロパティを持つ ShowToastEvent イベントを作成し、ディスパッチします。次の例では mode のデフォルト値を使用するので、含まれていません。

ShowToastEvent パラメータ型説明
titleStringヘッダーとして表示されるトーストのタイトル。
messageStringユーザへのメッセージを含む文字列。
messageDataString[] または Objectmessage 文字列の {index} プレースホルダを置換する url と label の値。
variantStringトーストに表示されるテーマとアイコン。有効な値は次のとおりです:
  • info — (デフォルト) 情報アイコンを表示する灰色のボックス。
  • success — チェックマークアイコンを表示する緑色のボックス。
  • warning — 警告アイコンを表示する黄色のボックス。
  • error — エラーアイコンを表示する赤色のボックス。
各テーマのスタイル設定については Lightning Design System のドキュメントを参照してください。
modeStringトーストの表示期間を指定します。有効な値は次のとおりです:
  • dismissible — (デフォルト) ユーザが [閉じる] ボタンをクリックするか、3 秒間経過するまで、表示され続けます。
  • pester — 3 秒間表示されます。
  • sticky— ユーザが [閉じる] ボタンをクリックするまで表示され続けます。

このコードを実行するには、github.com/trailheadapps/lwc-recipes ソースを Salesforce 組織にプッシュします。

関連トピック