Easy Dynamic Context Menu Component – tui.context-menu

Category: Javascript , Menu & Navigation | January 24, 2023
Author:nhn
Views Total:288 views
Official Page:Go to website
Last Update:January 24, 2023
License:MIT

Preview:

Easy Dynamic Context Menu Component –  tui.context-menu

Description:

tui.context-menu is a simple, dynamic, multi-level context menu UI component written in Vanilla JavaScript.

The context menu can be attached to any DOM element, which means that your users can access specific actions or options related to a particular element on a website or web app.

How to use it:

1. Install and import the tui.context-menu as an ES module.

# NPM
$ npm i tui-context-menu
import ContextMenu from 'tui-context-menu';

2. Or load the necessary JavaScript & CSS files in the document.

<link rel="stylesheet" href="dist/tui-context-menu.min.css" />
<script src="dist/tui-context-menu.min.js"></script>

3. Create a new context menu instance and specify the container ID.

<div id="example"></div>
<div id="target">Right-click</div>
// ES6
const contextMenu = new ContextMenu(document.querySelector('#example'));
// browser
var contextMenu = new tui.ContextMenu(document.querySelector('#example'));

4. Register menu items as follows:

contextMenu.register('#target', onClick, [
  {title: 'New Folder'},
  {
    title: 'New File',
    menu: [
      {title: '20170101.xls'},
      {title: 'image.png', command: 'export-to-png'},
      {title: 'image.jpg', command: 'export-to-jpg'}
    ]
  },
  {separator: true},
  {title: 'Rename'},
  {title: 'Delete'},
  {title: 'Copy', disable: true},
  {title: 'Paste', disable: true}
]);
// onClick event
function onClick(e, cmd) {
  console.log(cmd);
}

5. Destroy the context menu.

contextMenu.destroy();

You Might Be Interested In:


Leave a Reply