Input menzione
Un'area di testo con supporto menzioni inline. Digita un carattere di attivazione (predefinito "@") per aprire un dropdown filtrabile di utenti o elementi. Supporta navigazione da tastiera, visualizzazione avatar e memorizza i dati delle menzioni strutturati in un input nascosto come JSON.
Anteprima e Codice
_mention_input.html.erb
███
███████ █████ █████████ █████████
██████
███ ██████ ███████████████████████████
█████ ███████████
██████ ██████████
████████████ █████ █ ██ ███████ ████████████
████████ ████
██████ █
mention_input_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ███████████ █████████ ███████████
██████ ██████ █ █
████████ █ █████ ███████ ████████ ███ ██
██████ █ █████ ██████ ████████ ██ ██
███████████████ █ █████ ███████ ████████ █ █
█
mention_input_component.rb
█ ██████████████████████ ████
█████ █████████████████████ █ ███████████████████
███ █████████████████ ██████ ███ ████████████ ███ ████████ ████ ██████ ███ ████████████████ ██ ██████ ████ ████████
█████ █ ████
██████ █ █████
████████████ █ ███████████
████████ █ ███████
██████ █ █████
████████████████ █ ███████████████
mention_input_component.html.erb
████ ██████████ █████████████████ ███ ███ ████████████████████ ████████████████ ███
██ ██ ███████████████ ██
██████ ██████████ █████████████ ███████ ██████ ██████████
██ ███ ██
████ █████████████████
████ ██████████ ████████████████ ███
███████████████████████████████████████████
█████████
mention_input_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ███████████ █████████ ███████████
██████ ██████ █ █
████████ █ █████ ███████ ████████ ███ ██
██████ █ █████ ██████ ████████ ██ ██
███████████████ █ █████ ███████ ████████ █ █
█
Registro delle modifiche
- 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
Ottieni l'Accesso Completo
Sblocca il codice sorgente di questo componente e di tutti gli altri. Un solo pagamento per l'accesso a vita.
Ottieni l'Accesso Ora