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