Contextual Menu

Documentation

Input Parameters

Name Type Description
className string The class name to apply to the main element.
el HTMLElement The element to render the contextual menu to.
items Array<IContextualMenuItem> The menu items.
icon string The button icon.
elTarget HTMLElement The target element to associate the menu with.
text string The button text.

IContextualMenuItem interface

Name Type Description
icon string The button icon.
isDisabled boolean True to disable the item.
isSelected boolean True to render the item as selected.
onClick () The item click event.
text string The item text.

IContextualMenu Interface

Name Type/Description
get() Returns the fabric object.

Fabric Contextual Menu Interface

Name Type/Description
_container The main container element.
_hostTarget The host target element.
_position The contextual menu position.
_host The contextual host.
_isOpen Returns true, if the contextual menu is open.

JavaScript

var $REST = require("gd-sprest-js");

// Create the menu
var el = document.querySelector("#elMenu");
var elTarget = document.querySelector("#elTarget");
$REST.JS.Fabric.ContextualMenu({
    el: el,
    elTarget: elTarget,
    items: [
        {
            icon: "New",
            text: "Add Item",
            onClick: function() {
                // Code goes here
            }
        }
    ]
});

TypeScript

import { Fabric } from "gd-sprest-js";

// Create the menu
let el = document.querySelector("#elMenu");
let elTarget = document.querySelector("#elTarget");
Fabric.ContextualMenu({
    el,
    elTarget,
    items: [
        {
            icon: "New",
            text: "Add Item",
            onClick: () => {
                // Code goes here
            }
        }
    ]
});