Skip to main content

Configuring toolbar

The widget provides the Toolbar component with the items property that allows configuring defaultToolbarButtons.

Adding the default toolbar​

To add a toolbar, import the Toolbar component, and add the Toolbar tag. You should also use the internal api object to get access to the Gantt api. 

<script>
    import { getData } from "./common/data";
    import { Gantt, Toolbar} from "@wx/svelte-gantt";

    const data = getData();

    let api;

</script>

<Toolbar {api} />

<Gantt bind:api tasks={data.tasks} />

Configuring the set of buttons in the toolbar​

To configure the toolbar (the set of buttons in the toolbar and their appearance), import the defaultToolbarButtons and make necessary changes to the items array. Do not forget to add the items attribute to the Toolbar tag. 

<script>
  import { getData } from "../data";
  import { Gantt, Toolbar, defaultToolbarButtons } from "@wx/svelte-gantt";

  let api;

  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",
    },
  ];
</script>

<Toolbar {api} {items} />

<Gantt  bind:api tasks={data.tasks} />