Author: | nhn |
---|---|
Views Total: | 185 views |
Official Page: | Go to website |
Last Update: | January 24, 2023 |
License: | MIT |
Preview:

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();