Toolbar
Description
Toolbar helperUsage
<Toolbar {items} />
You can import the component from @svar-ui/svelte-velte-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-velte-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: