2.0.0 • Published 3 years ago
modern-context v2.0.0
ModernContext.js
A modern, beautiful, and lightweight context menu JavaScript library inspired by Fluent Design.

Dark Mode Support
ModernContext.js supports dark mode. If your browser is set to dark mode, the context menu will automatically switch to the black-based design.

Usage
See the documentation for more information.
npm
npm install modern-contextimport { Context } from "modern-context";Browser
import { Context } from "./dist/modern-context.min.js"Example
const contents = [
{
type: "item",
label: "Alert",
callback: () => {
alert("Clicked!");
}
},
{
type: "separator"
},
{
type: "item",
label: "No Callback"
}
];
const context = new Context("#target", contents);CSS Custom Properties
| Property | Default | Description |
|---|---|---|
| --mc-text-color | #333333 (white in dark mode) | Text color in the context menu. |
| --mc-background-color | rgba(255, 255, 255, 0.7) (rgba(51, 51, 51, 0.7) in dark mode) | Background color of the context menu. |
| --mc-corner-radius | 0.25em | Corner radius size of the context menu. |
| --mc-font-family | sans-serif | Font family of text. |
Supported Browsers
The following browsers are supported. ModernContext.js may work in other modern browsers, but I tested only the following browsers.
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
Development
Setup
npm installBuild
npm run buildGenerate documentation
npm run doc2.0.0
3 years ago