トースト
ユーザーフィードバックのためのスタック可能な通知トーストとフラッシュメッセージバナー。 成功、エラー、警告、情報のバリアントに対応し、設定可能な 表示位置、自動消去時間、複数の視覚スタイルを備えています。
デフォルト
左ボーダーアクセント付きの個別スタック可能なトースト通知
_toast.html.erb
███
█████ █████████ █████████
██████
███ ██████ ███████████████████ ████████ █████████ ████████ ████████ ██
███ ██████ ███████████████████ ██████ ████████ ████████ ██████████ ████ ███████ ████████ ██████ ██
███ ██████ ███████████████████ ████████ █████ ██████ ████████ ██████ █████████ █ ██
██
██
toast_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ██████ █ █ █████████ █ █████ ███████ ████████ ████ █ █
█████████ █
██████████████████████████ █ ███
████████████████████████████ █ █████████████████████
█████████████████████████████ █ ████████ █████ █████ █████████ █████ █████
toast_flash_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████
██████ ██████ █ █
████████████ █ █████ ████████ ████████ ████ ██
█████████ █ █████ ███████ ████████ ████ █
█
█████████ █
toast_component.html.erb
████ ██████████ █████████████ ███
███████████████████████
██████████████████████████████ █████████ ███
████████████████████████████████████ █████████████████████████
████████████
██████████████████████
█████ ██████████ ████████████ ████
███ ██████████████████████ ██
███████
████ █████████████ █████████
toast_component.rb
█ ██████████████████████ ████
█████ ██████████████ █ ███████████████████
████████ █ ██████████ █████ ███████ ████████████
███████████ ███████ █████████ █████████ █████████████ █████████
███ ████████████████████ ██████ ████ ████████ ██████ ████████████ █████ █████████ █████ ████████
██████ █ █████
████████ █ ███████
toast_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ██████ █ █ █████████ █ █████ ███████ ████████ ████ █ █
█████████ █
██████████████████████████ █ ███
████████████████████████████ █ █████████████████████
█████████████████████████████ █ ████████ █████ █████ █████████ █████ █████
toast_flash_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████
██████ ██████ █ █
████████████ █ █████ ████████ ████████ ████ ██
█████████ █ █████ ███████ ████████ ████ █
█
█████████ █
スタンダードフラッシュ
Railsフラッシュメッセージ用のページ上部全幅バナー
_toast.html.erb
███
█████ ████████ █████ █████████ █████████
██████████ ██████ ██ ███ ██ ████ ███ █████ █████ █████████
███████ █ █████ ████ ███ ███████ ████ ███████ ██ █ ███████████ ███████
██████
███ ██████ ██████████████████████████████████ █████████ █████ ██
███ ██████ ██████████████████████████████████ █████████ █ ███████ ████████ ██ █████████████ ████ ██
███ ██████ ██████████████████████████████████ █████████ █ ██████ ███████████ ██████ █████████ ██ █████████ ████ ██
toast_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ██████ █ █ █████████ █ █████ ███████ ████████ ████ █ █
█████████ █
██████████████████████████ █ ███
████████████████████████████ █ █████████████████████
█████████████████████████████ █ ████████ █████ █████ █████████ █████ █████
toast_flash_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████
██████ ██████ █ █
████████████ █ █████ ████████ ████████ ████ ██
█████████ █ █████ ███████ ████████ ████ █
█
█████████ █
toast_standard_flash_component.rb
█ ██████████████████████ ████
█████ ███████████████████████████ █ ███████████████████
███████████ █ █
███████ █████████
████████ █████████
██████ ███████
██████ █████████
████████ ████████
████████
toast_standard_flash_component.html.erb
██ ██ █████████████ ██
████ █████████████████
█████████████████████████████
████████████████████████████████████████ ████████████ ███
████████████████████████████████████ ████████ ████
██ █████████████ ██ ██████ ████████ ██
████ ██████████ ████████████████████ ███
█████████████████████████████████
████████████
██████████████████████
toast_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ██████ █ █ █████████ █ █████ ███████ ████████ ████ █ █
█████████ █
██████████████████████████ █ ███
████████████████████████████ █ █████████████████████
█████████████████████████████ █ ████████ █████ █████ █████████ █████ █████
toast_flash_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████
██████ ██████ █ █
████████████ █ █████ ████████ ████████ ████ ██
█████████ █ █████ ███████ ████████ ████ █
█
█████████ █
トーストフラッシュ
Railsフラッシュメッセージ用の角配置スタック可能トースト通知
_toast.html.erb
███
█████ █████ █████████ █████████
█████████████████ █████ ██ ████████ █████ █████████████ ████ █ █████ █████
███████ ████ ███████ ██ █ ███████████ █████ ██ █ █████ ██████ █████████
██████
████ ██████ █████████████████████████ █████████ █████ ██
████ ██████ █████████████████████████ █████████ █ ███████ ████████ ██ █████████ ██████████ ██
████ ██████ █████████████████████████ █████████ █ ██████ ███████████ ██████ █████████ ██ █████████ █████████████ ██
toast_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ██████ █ █ █████████ █ █████ ███████ ████████ ████ █ █
█████████ █
██████████████████████████ █ ███
████████████████████████████ █ █████████████████████
█████████████████████████████ █ ████████ █████ █████ █████████ █████ █████
toast_flash_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████
██████ ██████ █ █
████████████ █ █████ ████████ ████████ ████ ██
█████████ █ █████ ███████ ████████ ████ █
█
█████████ █
toast_toast_flash_component.html.erb
██ ██ █████████████ ██
████ ██████████ █████████████████ ███
█████████████████████████████
████████████████████████████████████████ ████████████ ███
████████████████████████████████████ ████████ ████
████ ██████████████████
██ █████████████ ██ ██████ ████████ ██
████ ██████████ ███████████████████ ███
█████████████████████████████████
████████████
toast_toast_flash_component.rb
█ ██████████████████████ ████
█████ ████████████████████████ █ ███████████████████
███████████ █ █
███████ █████████
████████ █████████
██████ ███████
██████ █████████
████████ ████████
████████
toast_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ██████ █ █ █████████ █ █████ ███████ ████████ ████ █ █
█████████ █
██████████████████████████ █ ███
████████████████████████████ █ █████████████████████
█████████████████████████████ █ ████████ █████ █████ █████████ █████ █████
toast_flash_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████
██████ ██████ █ █
████████████ █ █████ ████████ ████████ ████ ██
█████████ █ █████ ███████ ████████ ████ █
█
█████████ █
変更履歴
- v1.1.0: Added standard-flash and toast-flash styles for Rails flash messages
- v1.0.0: Initial release with success, error, warning, info variants
- Auto-dismiss with configurable duration
- Pause auto-dismiss on hover
- Smooth enter/exit animations
- Accessible with role="alert" and aria-live