Command Bar

Office Fabric-UI (JS)

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 bar to.
mainCommands Array<ICommandButtonProps> The main area commands.
sideCommands Array<ICommandButtonProps> The side area commands.

ICommandBar Interface

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

Fabric Command Bar 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: [
        {
            icon: "Add",
            text: "New Item",
            onClick: function() {
                // Code goes here
            }
        },
        {
            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
            }
        },
    ]
});