Champ de mention
Une zone de texte avec support de mentions en ligne. Tapez un caractère déclencheur (par défaut « @ ») pour ouvrir une liste déroulante filtrable d'utilisateurs ou d'éléments. Prend en charge la navigation au clavier, l'affichage d'avatars et stocke les données de mention structurées dans un champ caché au format JSON.
Aperçu et code
_mention_input.html.erb
███
███████ █████ █████████ █████████
██████
███ ██████ ███████████████████████████
█████ ███████████
██████ ██████████
████████████ █████ █ ██ ███████ ████████████
████████ ████
██████ █
mention_input_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ███████████ █████████ ███████████
██████ ██████ █ █
████████ █ █████ ███████ ████████ ███ ██
██████ █ █████ ██████ ████████ ██ ██
███████████████ █ █████ ███████ ████████ █ █
█
mention_input_component.rb
█ ██████████████████████ ████
█████ █████████████████████ █ ███████████████████
███ █████████████████ ██████ ███ ████████████ ███ ████████ ████ ██████ ███ ████████████████ ██ ██████ ████ ████████
█████ █ ████
██████ █ █████
████████████ █ ███████████
████████ █ ███████
██████ █ █████
████████████████ █ ███████████████
mention_input_component.html.erb
████ ██████████ █████████████████ ███ ███ ████████████████████ ████████████████ ███
██ ██ ███████████████ ██
██████ ██████████ █████████████ ███████ ██████ ██████████
██ ███ ██
████ █████████████████
████ ██████████ ████████████████ ███
███████████████████████████████████████████
█████████
mention_input_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ███████████ █████████ ███████████
██████ ██████ █ █
████████ █ █████ ███████ ████████ ███ ██
██████ █ █████ ██████ ████████ ██ ██
███████████████ █ █████ ███████ ████████ █ █
█
Journal des modifications
- Initial release with trigger character detection
- Filterable dropdown with keyboard navigation
- Avatar support with fallback initials
- Structured JSON mention data in hidden input
- Dark mode support
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