Skip to main content

Toolbar

Description​

Toolbar helper

Usage​

<Toolbar items={items} />

You can import the component from wx-react-gantt .

Items array:

items?: [
    {
        id?: string,
        comp: 'button',
        icon?: string,
        css?: string,
        text?: string,
        type?: string,
        layout?: string,
        items?: [],
        handler?: () => {}
    }
]

Parameters​

The items array has the following parameters:

  • id - (optional) the id of a button
  • comp - (optional) 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'
  • css - (optional) the name of the CSS class applied to the button
  • layout - (optional) layout for the group of items; possible layout values: "row", "column"
  • items - (optional) an array that defines subitems
  • handler - (optional) a function that is called when a button is activated

Example​

To configure the toolbar (the set of buttons in the toolbar and/or their appearance), import the Toolbar component of Gantt and make necessary changes to the items array. Do not forget to add the items attribute to the Toolbar tag. It's also required to pass the api object to Toolbar (for more details, refer to How to access Gantt API). Other usage examples see here: Configuring Toolbar

import { getData } from "../data";
import { Gantt, Toolbar } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import React, { useRef } from "react";

const Component = () => {
  const apiRef = useRef();
  const data = getData();

  const items = [
    {
      id: "add-task",
      comp: "button",
      icon: "wxi-plus",
      text: "Add task",
      type: "primary",
    },
    {
      id: "edit-task",
      comp: "button",
      icon: "wxi-edit",
      text: "edit",
      type: "link",
    },
  ];

  return (
    <>
      <Toolbar api={apiRef.current} items={items} />
      <Gantt apiRef={apiRef} tasks={data.tasks} />
    </>
  );
};

export default Component;

Related articles: