@logo-elements/context-menu

A web component that can be attached to any component to display a context menu.

<logo-elements-context-menu>
  <span>Open a context menu with <b>right click</b> or with <b>long touch.</b></span>
</logo-elements-context-menu>

<script>
  const contextMenu = document.querySelector('logo-elements-context-menu');
  contextMenu.renderer = function (root) {
    let listBox = root.firstElementChild;
    // Check if there is a list-box generated with the previous renderer call to update its content instead of recreation
    if (listBox) {
      listBox.innerHTML = '';
    } else {
      listBox = document.createElement('logo-elements-list-box');
      root.appendChild(listBox);
    }

    ['First', 'Second', 'Third'].forEach(function (name) {
      const item = document.createElement('logo-elements-item');
      item.textContent = name + ' menu item';
      listBox.appendChild(item);
    });
  };
</script>

Note: <logo-elements-list-box> component used in the above example should be installed and imported separately.

Installation

Install the component:

npm i @logo-elements/context-menu -s

Once installed, import the component in your application:

import '@logo-elements/context-menu';

For more detailed information, please visit:

Logo Elements Documentation ↗