Toolbar

Group of actionable items / buttons. It uses the command pattern to render the button.


Usage

import { ItsyToolbar } from '@itsy-ui/navigation';

const schema = {
  "data": [
    {
      "name": "add",
      "displayText": "Add",
      "isPrimary": true,
      "enabled": true
    },
    {
      "name": "edit",
      "displayText": "Edit",
      "isPrimary": true,
      "enabled": true
    },
    {
      "name": "delete",
      "displayText": "Delete",
      "isPrimary": true,
      "enabled": true
    }
  ],
  "typeId": "toolbar"
};

<ItsyToolbar className="toolbar" schema={schema} />


API

name type default description
className String additional class name of root node.
style Object {} Inline style object
schema Object {} Schema which contains information to be displayed inside drawer.


Schema API’s

name type default description
data object Array of actionable items. Each items contains following attributes,
  • name - Key of the command to be invoke while click on the items
  • displayText - Text to be displayed in toolbar item
  • isPrimary - Either display as a primary action or secondary action inside action flyout.
  • enabled - Enable or Disable the action item.
typeId String Model name tab bound to


Compatibility

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Electron
Electron
Edge last 2 versions last 2 versions last 2 versions last 2 versions