Toast
Notifications toast empilables et bannières de messages flash pour le retour utilisateur. Prend en charge les variantes succès, erreur, avertissement et info avec une position configurable, une durée de fermeture automatique et plusieurs styles visuels.
Par défaut
Notification toast empilable individuelle avec accent de bordure gauche
███
█████ █████████ █████████
██████
███ ██████ ███████████████████ ████████ █████████ ████████ ████████ ██
███ ██████ ███████████████████ ██████ ████████ ████████ ██████████ ████ ███████ ████████ ██████ ██
███ ██████ ███████████████████ ████████ █████ ██████ ████████ ██████ █████████ █ ██
██
██
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ██████ █ █ █████████ █ █████ ███████ ████████ ████ █ █
█████████ █
██████████████████████████ █ ███
████████████████████████████ █ █████████████████████
█████████████████████████████ █ ████████ █████ █████ █████████ █████ █████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████
██████ ██████ █ █
████████████ █ █████ ████████ ████████ ████ ██
█████████ █ █████ ███████ ████████ ████ █
█
█████████ █
████ ██████████ █████████████ ███
███████████████████████
██████████████████████████████ █████████ ███
████████████████████████████████████ █████████████████████████
████████████
██████████████████████
█████ ██████████ ████████████ ████
███ ██████████████████████ ██
███████
████ █████████████ █████████
█ ██████████████████████ ████
█████ ██████████████ █ ███████████████████
████████ █ ██████████ █████ ███████ ████████████
███████████ ███████ █████████ █████████ █████████████ █████████
███ ████████████████████ ██████ ████ ████████ ██████ ████████████ █████ █████████ █████ ████████
██████ █ █████
████████ █ ███████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ██████ █ █ █████████ █ █████ ███████ ████████ ████ █ █
█████████ █
██████████████████████████ █ ███
████████████████████████████ █ █████████████████████
█████████████████████████████ █ ████████ █████ █████ █████████ █████ █████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████
██████ ██████ █ █
████████████ █ █████ ████████ ████████ ████ ██
█████████ █ █████ ███████ ████████ ████ █
█
█████████ █
Flash standard
Bannière pleine largeur en haut de page pour les messages flash Rails
███
█████ ████████ █████ █████████ █████████
██████████ ██████ ██ ███ ██ ████ ███ █████ █████ █████████
███████ █ █████ ████ ███ ███████ ████ ███████ ██ █ ███████████ ███████
██████
███ ██████ ██████████████████████████████████ █████████ █████ ██
███ ██████ ██████████████████████████████████ █████████ █ ███████ ████████ ██ █████████████ ████ ██
███ ██████ ██████████████████████████████████ █████████ █ ██████ ███████████ ██████ █████████ ██ █████████ ████ ██
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ██████ █ █ █████████ █ █████ ███████ ████████ ████ █ █
█████████ █
██████████████████████████ █ ███
████████████████████████████ █ █████████████████████
█████████████████████████████ █ ████████ █████ █████ █████████ █████ █████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████
██████ ██████ █ █
████████████ █ █████ ████████ ████████ ████ ██
█████████ █ █████ ███████ ████████ ████ █
█
█████████ █
█ ██████████████████████ ████
█████ ███████████████████████████ █ ███████████████████
███████████ █ █
███████ █████████
████████ █████████
██████ ███████
██████ █████████
████████ ████████
████████
██ ██ █████████████ ██
████ █████████████████
█████████████████████████████
████████████████████████████████████████ ████████████ ███
████████████████████████████████████ ████████ ████
██ █████████████ ██ ██████ ████████ ██
████ ██████████ ████████████████████ ███
█████████████████████████████████
████████████
██████████████████████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ██████ █ █ █████████ █ █████ ███████ ████████ ████ █ █
█████████ █
██████████████████████████ █ ███
████████████████████████████ █ █████████████████████
█████████████████████████████ █ ████████ █████ █████ █████████ █████ █████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████
██████ ██████ █ █
████████████ █ █████ ████████ ████████ ████ ██
█████████ █ █████ ███████ ████████ ████ █
█
█████████ █
Flash toast
Notifications toast empilables positionnées en coin pour les messages flash Rails
███
█████ █████ █████████ █████████
█████████████████ █████ ██ ████████ █████ █████████████ ████ █ █████ █████
███████ ████ ███████ ██ █ ███████████ █████ ██ █ █████ ██████ █████████
██████
████ ██████ █████████████████████████ █████████ █████ ██
████ ██████ █████████████████████████ █████████ █ ███████ ████████ ██ █████████ ██████████ ██
████ ██████ █████████████████████████ █████████ █ ██████ ███████████ ██████ █████████ ██ █████████ █████████████ ██
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ██████ █ █ █████████ █ █████ ███████ ████████ ████ █ █
█████████ █
██████████████████████████ █ ███
████████████████████████████ █ █████████████████████
█████████████████████████████ █ ████████ █████ █████ █████████ █████ █████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████
██████ ██████ █ █
████████████ █ █████ ████████ ████████ ████ ██
█████████ █ █████ ███████ ████████ ████ █
█
█████████ █
██ ██ █████████████ ██
████ ██████████ █████████████████ ███
█████████████████████████████
████████████████████████████████████████ ████████████ ███
████████████████████████████████████ ████████ ████
████ ██████████████████
██ █████████████ ██ ██████ ████████ ██
████ ██████████ ███████████████████ ███
█████████████████████████████████
████████████
█ ██████████████████████ ████
█████ ████████████████████████ █ ███████████████████
███████████ █ █
███████ █████████
████████ █████████
██████ ███████
██████ █████████
████████ ████████
████████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ██████ █ █ █████████ █ █████ ███████ ████████ ████ █ █
█████████ █
██████████████████████████ █ ███
████████████████████████████ █ █████████████████████
█████████████████████████████ █ ████████ █████ █████ █████████ █████ █████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████
██████ ██████ █ █
████████████ █ █████ ████████ ████████ ████ ██
█████████ █ █████ ███████ ████████ ████ █
█
█████████ █
Journal des modifications
- 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
Obtenir l'accès complet
Débloquez le code source de ce composant et de tous les autres. Paiement unique pour un accès à vie.
Obtenir l'accès maintenant