Skip to main content

defaultToolbarButtons

Description​

An array of objects with default configuration parameters for the Toolbar buttons

Default config​

const defaultToolbarButtons = [
    {
        id: "add-task",
        comp: "button",
        icon: "wxi-plus",
        text: "New task",
        type: "primary",
    },
    {
        id: "edit-task",
        comp: "icon",
        icon: "wxi-edit",
        menuText: "Edit",
    },
    {
        id: "delete-task",
        comp: "icon",
        icon: "wxi-delete",
        menuText: "Delete",
    },
    { comp: "separator" },
    {
        id: "move-task:up",
        comp: "icon",
        icon: "wxi-angle-up",
        menuText: "Move up",
    },
    {
        id: "move-task:down",
        comp: "icon",
        icon: "wxi-angle-down",
        menuText: "Move down",
    },
    { comp: "separator" },
    {
        id: "copy-task",
        comp: "icon",
        icon: "wxi-content-copy",
        menuText: "Copy",
    },
    {
        id: "cut-task",
        comp: "icon",
        icon: "wxi-content-cut",
        menuText: "Cut",
    },
    {
        id: "paste-task",
        comp: "icon",
        icon: "wxi-content-paste",
        menuText: "Paste",
    },
    { comp: "separator" },
    {
        id: "indent-task:add",
        comp: "icon",
        icon: "wxi-indent",
        menuText: "Indent",
    },
    {
        id: "indent-task:remove",
        comp: "icon",
        icon: "wxi-unindent",
        menuText: "Outdent",
    },
];

Parameters​

The array includes objects with the next parameters for each button:

  • id - (optional) the id of a button
  • comp - (required) specifies the type of the button item that can be one of the following: button, separator, spacer, label, icon
  • text - (optional) the text for a button
  • icon - (optional) sets the icon for a button, and the 'css' property applies a CSS class to the item
  • type - (optional) the following types of buttons are available: 'default', 'primary', 'secondary', 'danger', 'link'
  • menuText - (optional) the text for the option in the dropdown menu that appears when the screen size is small

Related articles: