スナックバー（アクションボタン付き）
スナックバーは Material Design で定義された通知 UI で、画面下中央に短い文と操作ボタンをまとめて表示します。このサンプルはボタンで showSnack() を呼び、 translateX(-50%) translateY(140%) で画面外に待機していたバーをスライドインさせます。
解説
スナックバーは Material Design で定義された通知 UI で、画面下中央に短い文と操作ボタンをまとめて表示します。このサンプルはボタンで showSnack() を呼び、translateX(-50%) translateY(140%) で画面外に待機していたバーをスライドインさせます。「元に戻す」アクションと「×」閉じるボタンを備え、5秒後に自動で消えるほか、各ボタンのクリックでも非表示になります。連続表示に備えて clearTimeout でタイマーを作り直しています。
採用するとよい場面
- 削除・アーカイブ直後に「元に戻す」を提供したいとき
- 一括操作の結果をまとめて伝えたいとき
- トーストより一歩踏み込んだ操作導線が必要なとき
表示時間は setTimeout の 5000 ミリ秒、位置は bottom の値で調整します。「元に戻す」は取り消し可能な操作にだけ付けるのが原則です。閉じるボタンには aria-label が付いており、スクリーンリーダーでも用途が伝わるようになっています。
よくある質問
トースト通知とは何が違いますか
トーストは結果を伝えるだけで操作ボタンを持ちませんが、スナックバーは画面下中央に表示され「元に戻す」などのアクションボタンを併せ持ちます。取り消し可能な操作の直後に向いています。
自動で消えるまでの時間は変えられますか
変えられます。JavaScript 内の setTimeout の 5000 がミリ秒単位の表示時間です。値を大きくすれば長く表示されます。閉じるボタンや元に戻すを押せば、その前でも消えます。