Skip to main content

Toolbar

Description​

Toolbar helper

Usage​

<Toolbar {items} />

You can import the component from @svar-ui/svelte-gantt .

Items array:

items?: {
    id?: string | number,
    comp?: string | Component<any>,
    icon?: string,
    css?: string,
    handler?: (item: any, value?: any) => void,
    text?: string,
    menuText?: string,
    key?: string,
    spacer?: boolean,
    collapsed?: boolean,
    layout?: "column",
    items?: Array<any>,
    [key: string]: any
}[];

Parameters​

All parameters description see here: Toolbar

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

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

  let api = $state();
  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:this={api} tasks={data.tasks} />

Related articles: