Erwähnungseingabe
Ein Textbereich mit Inline-Erwähnungsunterstützung. Geben Sie ein Auslöserzeichen (Standard „@") ein, um ein filterbares Dropdown mit Benutzern oder Einträgen zu öffnen. Unterstützt Tastaturnavigation, Avatar-Anzeige und speichert strukturierte Erwähnungsdaten als JSON in einem versteckten Eingabefeld.
Vorschau & Code
_mention_input.html.erb
███
███████ █████ █████████ █████████
██████
███ ██████ ███████████████████████████
█████ ███████████
██████ ██████████
████████████ █████ █ ██ ███████ ████████████
████████ ████
██████ █
mention_input_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ███████████ █████████ ███████████
██████ ██████ █ █
████████ █ █████ ███████ ████████ ███ ██
██████ █ █████ ██████ ████████ ██ ██
███████████████ █ █████ ███████ ████████ █ █
█
mention_input_component.rb
█ ██████████████████████ ████
█████ █████████████████████ █ ███████████████████
███ █████████████████ ██████ ███ ████████████ ███ ████████ ████ ██████ ███ ████████████████ ██ ██████ ████ ████████
█████ █ ████
██████ █ █████
████████████ █ ███████████
████████ █ ███████
██████ █ █████
████████████████ █ ███████████████
mention_input_component.html.erb
████ ██████████ █████████████████ ███ ███ ████████████████████ ████████████████ ███
██ ██ ███████████████ ██
██████ ██████████ █████████████ ███████ ██████ ██████████
██ ███ ██
████ █████████████████
████ ██████████ ████████████████ ███
███████████████████████████████████████████
█████████
mention_input_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ███████████ █████████ ███████████
██████ ██████ █ █
████████ █ █████ ███████ ████████ ███ ██
██████ █ █████ ██████ ████████ ██ ██
███████████████ █ █████ ███████ ████████ █ █
█
Änderungsprotokoll
- 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
Vollzugang erhalten
Schalte den Quellcode für diese und alle anderen Komponenten frei. Einmalige Zahlung für lebenslangen Zugang.
Jetzt Zugang erhalten