Centre de notifications
Panneau de notifications avec icône cloche, badge de comptage, états lu/non lu et fonctionnalité de marquage comme lu. Inclut la fermeture par clic extérieur, le support de la touche Échap et la diffusion d'événements.
Aperçu et code
_notification_center.html.erb
███ ████████████ ██████ █████████
█████████
██████████████ █████ █ █████ ██ ████████████ ██████ ████ ████ ███████ █████████ ██████ ██████ ████████ ██████ █████
█████████
█████████████ ███████ █ █████ █████ ████████████████ ████ █████████████ ██ ████████
███████████ ██████ █ ███ ██████████████ █████████
███████████████ ██████ █ █████ ███ ██ █████ █████████
██████
███ ██████ ████████ ██████████████████████ ███████ █
██████████████ █
notification_center_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ █████████████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ████████ ████████ ███████████████
█████████ █
█████████ █ █████
████████████████████████ █ ████████████████████████████
███████████████████ █ █████████████████████████
notification_center_component.html.erb
████ █████████████████████████████████████ ██████████ █████████████████ ████
███ ████ ███████ ██
███████ ████████████████████████████████████████ █████████████████████████████████████████ █████████████
██████████ ███████████████ ████
████ ██████████████████████████████████ ██████████ ████ ███████████ ██████████ █ ██ ███ ██████████████████ ██████████████████████
█████ ██████████████████████ ███████████████████████ ██████████ █████████████ ██████ █ █ █ ████████████████ █████ █ █ █ ██ ████████ █ █ █ █ █ ███████████ █████ █ █ ███████ ██████████████ ████ █████ █████ ██████████ ████████ ██████ █ █ ███████ ███████ ███ █ █ █ ███████ ██ ██
██████
██ ██ ███████████ ██
█████ ███████████████████████████████████████ ██████████ █████████████ ████
███ ██████████ ██
notification_center_component.rb
█ ██████████████████████ ████
█████ ███████████████████████████ █ ███████████████████
███████████ ███████████████ ██████████████ ████████████ ███████████████
███ ██████████████████████████ █████████████ ████ ███████████ ███ ███████████████ ███████████████ █████ ███ ██ ██████ ████████
██████████████ █ █████████████
█████████████ █ ████████████ ██ ███████████████████ █ ███ █████████ █
███████████ █ ██████████
███████████████ █ ██████████████
notification_center_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ █████████████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ████████ ████████ ███████████████
█████████ █
█████████ █ █████
████████████████████████ █ ████████████████████████████
███████████████████ █ █████████████████████████
Journal des modifications
- Initial release with bell trigger, notification panel, read/unread states
- Mark individual and mark all as read
- Click-outside and Escape to close
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