Command Button

Documentation

Input Parameters

Name Type Description
className string The class name to apply to the main element.
el HTMLElement The element to render the command button to.
icon string The button icon.
isAction boolean True for action command buttons.
isActive boolean True for active command buttons.
isDisabled boolean True to disable the button.
isInline boolean True for inline command buttons.
isPivot boolean True for pivot command buttons.
isSplit boolean True for split command buttons.
isTextOnly boolean True for text only command buttons.
menu IContextualMenuProps The contextual menu.
onClick (ev: HTMLButtonElement) The click event.
text string The button text.

ICommandButton Interface

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

Fabric Command Button Interface

Name Type/Description
_container The main container element.

JavaScript

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

// Create the command bar
var el = document.querySelector("#cmdbar");
$REST.JS.Fabric.CommandBar({
    el: el,
    mainCommands: [
        // Create the add command bar button
        {
            icon: "Add",
            text: "New Item",
            onClick: function() {
                // Code goes here
            }
        },
        // Create the filter command bar button
        {
            text: "Filter",
            onClick: function() {
                // Code goes here
            }
        },
    ]
});

TypeScript

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

// Create the command bar
let el = document.querySelector("#cmdbar");
Fabric.CommandBar({
    el,
    mainCommands: [
        {
            icon: "Add",
            text: "New Item",
            onClick: () => {
                // Code goes here
            }
        },
        {
            text: "Filter",
            onClick: () => {
                // Code goes here
            }
        },
    ]
});