Menú contextual
Menú contextual de clic derecho con elementos, submenús, divisores y visualización de atajos de teclado. Ofrece una experiencia de menú contextual de aspecto nativo activado por clic derecho (evento contextmenu), posicionado en el cursor, con navegación completa por teclado, soporte de submenús, elementos marcables y estilo para acciones destructivas. Ajusta automáticamente su posición para mantenerse dentro del viewport.
Vista Previa y Código
_context_menu.html.erb
███
███████ ████ █████████ █████████
██████
███ ██████ ██████████████████████████ ██████ █
█ ██████ ██████ █████ █████ █████████ ████ ██
█ ██████ ███████ █████ ██████ █████████ ████ ██
█ ██████ ████████ █████ ███████ █████████ ████ ██
█ ████████ ████ ██
█
context_menu_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████ ███████
██████ ██████ █ █
█████ █ █████ ████████ ████████ █████ █
█
█████████ █
████████████████ █ ██
context_menu_component.rb
█ ██████████████████████ ████
█████ ████████████████████ █ ███████████████████
███████████ ████████
████████████ ████████████ ██████ █
█████ █ ███ ██████ ████████ █████████████████████████████████████ ██
████████ █ ███ █████████ ████████ ████████████████████████████████████████ ██
████████ █ ███ █████████ ████████ ████████████████████████████████████████ ██
██████████ █ ███ ███████████ ████████ ██████████████████████████████████████████ █
█
context_menu_component.html.erb
████ ██████████████████████████████
███████████████████████████████████████████████████████ ███████████████████████████████████████ █████████████████████████████████████
██████████ ███████████████ ████
███ ███████ ████ █ ███████████ █████ ███ ███████████ █████ ██
████ █████████████████████████████████████████████████████ ███████████████
██ ██ ████████ ██
███ ███████ ██
██ ████ ██
████ ██████████ ████████ █████████████ ████████████████ █████████████████████ ██████████ ███████████ ██████████████ ███████████████████ ███████ █████████████
context_menu_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████ ███████
██████ ██████ █ █
█████ █ █████ ████████ ████████ █████ █
█
█████████ █
████████████████ █ ██
Registro de Cambios
- v1.0.0: Initial release with items, submenus, dividers, checkable items, and keyboard navigation
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