2.0.0 • Published 1 year ago

modern-context v2.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

ModernContext.js

A modern, beautiful, and lightweight context menu JavaScript library inspired by Fluent Design.

screenshot

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.

screenshot

Usage

See the documentation for more information.

npm

npm install modern-context
import { 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

PropertyDefaultDescription
--mc-text-color#333333 (white in dark mode)Text color in the context menu.
--mc-background-colorrgba(255, 255, 255, 0.7) (rgba(51, 51, 51, 0.7) in dark mode)Background color of the context menu.
--mc-corner-radius0.25emCorner radius size of the context menu.
--mc-font-familysans-serifFont 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 install

Build

npm run build

Generate documentation

npm run doc