Campo de menciones
Un área de texto con soporte de menciones en línea. Escribe un carácter disparador (por defecto "@") para abrir un desplegable filtrable de usuarios o elementos. Soporta navegación por teclado, visualización de avatares y almacena datos estructurados de menciones en un campo oculto como JSON.
Vista Previa y Código
_mention_input.html.erb
███
███████ █████ █████████ █████████
██████
███ ██████ ███████████████████████████
█████ ███████████
██████ ██████████
████████████ █████ █ ██ ███████ ████████████
████████ ████
██████ █
mention_input_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ███████████ █████████ ███████████
██████ ██████ █ █
████████ █ █████ ███████ ████████ ███ ██
██████ █ █████ ██████ ████████ ██ ██
███████████████ █ █████ ███████ ████████ █ █
█
mention_input_component.rb
█ ██████████████████████ ████
█████ █████████████████████ █ ███████████████████
███ █████████████████ ██████ ███ ████████████ ███ ████████ ████ ██████ ███ ████████████████ ██ ██████ ████ ████████
█████ █ ████
██████ █ █████
████████████ █ ███████████
████████ █ ███████
██████ █ █████
████████████████ █ ███████████████
mention_input_component.html.erb
████ ██████████ █████████████████ ███ ███ ████████████████████ ████████████████ ███
██ ██ ███████████████ ██
██████ ██████████ █████████████ ███████ ██████ ██████████
██ ███ ██
████ █████████████████
████ ██████████ ████████████████ ███
███████████████████████████████████████████
█████████
mention_input_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ███████████ █████████ ███████████
██████ ██████ █ █
████████ █ █████ ███████ ████████ ███ ██
██████ █ █████ ██████ ████████ ██ ██
███████████████ █ █████ ███████ ████████ █ █
█
Registro de Cambios
- 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
Obtener Acceso Completo
Desbloquea el código fuente de este componente y todos los demás. Un solo pago para acceso de por vida.
Obtener Acceso