Overlays v1.0.0

Kontextmenü

Rechtsklick-Kontextmenü mit Einträgen, Untermenüs, Trennlinien und Tastenkürzel-Anzeige. Bietet ein nativ wirkendes Kontextmenü, ausgelöst durch Rechtsklick (contextmenu-Event), positioniert am Mauszeiger, mit vollständiger Tastaturnavigation, Untermenü-Unterstützung, aktivierbaren Einträgen und Hervorhebung destruktiver Aktionen. Passt die Position automatisch an, um innerhalb des Viewports zu bleiben.

Vorschau & Code

_context_menu.html.erb

███
  ███████ ████ █████████ █████████

  ██████
    ███ ██████ ██████████████████████████ ██████ █
      █ ██████ ██████   █████ █████   █████████ ████ ██
      █ ██████ ███████  █████ ██████  █████████ ████ ██
      █ ██████ ████████ █████ ███████ █████████ ████ ██
      █ ████████ ████ ██
      █

Get Access to View Code

context_menu_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ ████████ ███████
  ██████ ██████ █ █
    █████ █ █████ ████████ ████████ █████ █
  █

  █████████ █
    ████████████████ █ ██

Get Access to View Code

context_menu_component.rb

█ ██████████████████████ ████

█████ ████████████████████ █ ███████████████████
  ███████████ ████████
  ████████████ ████████████ ██████ █
    █████      █ ███ ██████      ████████ █████████████████████████████████████ ██
    ████████   █ ███ █████████   ████████ ████████████████████████████████████████ ██
    ████████   █ ███ █████████   ████████ ████████████████████████████████████████ ██
    ██████████ █ ███ ███████████ ████████ ██████████████████████████████████████████ █
  █

Get Access to View Code

context_menu_component.html.erb

████ ██████████████████████████████
     ███████████████████████████████████████████████████████ ███████████████████████████████████████ █████████████████████████████████████
     ██████████ ███████████████ ████

  ███ ███████ ████ █ ███████████ █████ ███ ███████████ █████ ██
  ████ █████████████████████████████████████████████████████ ███████████████
    ██ ██ ████████ ██
      ███ ███████ ██
    ██ ████ ██
      ████ ██████████ ████████ █████████████ ████████████████ █████████████████████ ██████████ ███████████ ██████████████ ███████████████████ ███████ █████████████

Get Access to View Code

context_menu_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ ████████ ███████
  ██████ ██████ █ █
    █████ █ █████ ████████ ████████ █████ █
  █

  █████████ █
    ████████████████ █ ██

Get Access to View Code

Optionen

Name	Typ	Standard	Beschreibung
`items` *	Array	erforderlich	Array of item hashes. Regular: { label:, icon:, shortcut:, action:, destructive: }. Divider: { divider: true }. Submenu: { label:, icon:, children: [] }. Checkable: { label:, checked:, action:, checkable: true }.
`trigger_selector`	String	`"parent"`	CSS selector or "parent" for the right-click trigger area. When "parent", wraps trigger in a div.

Name	Typ	Standard	Beschreibung
`class`	String	`""`	Additional CSS classes for the wrapper element

Slots

Name	Beschreibung
`trigger`	The area that triggers the context menu on right-click. Renders a full-size div wrapping the slot content.
`menu_items (with_item)`	Regular menu item with label:, icon: (SVG string), shortcut:, href:, destructive: options
`menu_items (with_divider)`	Visual separator line between items
`menu_items (with_submenu)`	Submenu group with label:, icon:, and nested with_sub_item calls
`menu_items (with_checkable)`	Checkable item with label:, checked: (Boolean) that toggles on click

Änderungsprotokoll v1.0.0

- v1.0.0: Initial release with items, submenus, dividers, checkable items, and keyboard navigation

Vollzugang erhalten

Schalte den Quellcode für diese und alle anderen Komponenten frei. Einmalige Zahlung für lebenslangen Zugang.

Jetzt Zugang erhalten