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
            }
        },
    ]
});