右下フェードイン トースト通知
トースト通知は、操作の結果を画面の隅に短時間だけ表示して自動で消える軽量なフィードバック UI です。このサンプルはボタンクリックで showToast() が呼ばれ、画面右下のトーストに is-show クラスを付与して transform でスライドインさせます。
解説
トースト通知は、操作の結果を画面の隅に短時間だけ表示して自動で消える軽量なフィードバック UI です。このサンプルはボタンクリックで showToast() が呼ばれ、画面右下のトーストに is-show クラスを付与して transform でスライドインさせます。3秒後に setTimeout でクラスを外して消去し、連打されても clearTimeout でタイマーを作り直すため表示が重なりません。
向いている使い道
- 「コピーしました」などクリップボード操作の確認
- 保存完了・送信完了の軽い通知
- ユーザーの操作を止めずに状況だけ伝えたいとき
表示位置は bottom と right の値で、表示時間は setTimeout の 3000 ミリ秒で調整できます。トーストは消えるのが前提なので、入力を求める重要な確認には使わず、モーダルやスナックバーを選びます。アニメーションが苦手な人に配慮するなら prefers-reduced-motion で動きを弱める指定を加えると親切です。
よくある質問
表示時間を変えるにはどこを直しますか
JavaScript 内の setTimeout の第二引数が表示時間です。3000 はミリ秒なので、5000 に変えれば5秒間表示されます。0 に近づけるとすぐ消えるので注意してください。
右下以外の位置に出せますか
出せます。.ts の bottom と right を top や left に書き換えれば、左下や右上など好きな角に配置できます。複数同時に出したい場合は表示要素を増やす実装が必要です。