Author: | Robot-Inventor |
---|---|
Views Total: | 89 views |
Official Page: | Go to website |
Last Update: | February 18, 2023 |
License: | MIT |
Preview:

Description:
A dynamic, animated, good-looking context menu JavaScript library inspired by Microsoft Fluent Design.
How to use it:
1. Install & import the modern-context component.
# NPM $ npm i modern-context
// ES module import { Context } from "modern-context";
// Browser import { Context } from "./dist/modern-context.min.js"
2. Define your menu data in an array of objects containing item type, label, and callback.
const menuItems = [ { type: "item", label: "CSSScript", callback: () => { alert("CSSScript"); } }, { type: "item", label: "jQueryScript", callback: () => { alert("jQueryScript"); } }, { type: "item", label: "VueScript", callback: () => { alert("VueScript"); } }, { type: "separator" }, { type: "item", label: "ReactScript" }, ];
3. Initialize the library and attach the context menu to a container you specify.
const context = new Context("#container", menuItem);
4. Add more items to the context menu.
// with callback context.add_item("Google", () => { alert("Google") }); // with no callback context.add_item("No Callback"); // add separator context.add_separator(); // add more items context.add_contents(menuItem2);
5. Open/close the context menu manually.
context.open(); context.close();
Changelog:
v2.0.0 (02/18/2023)
- This version includes some breaking changes. For example, methods are renamed snake_case to camelCase and CSS custom properties have mc- prefix.