Skip to main content

getEditorButtons

Description​

Returns the default configuration of Editor top bar buttons

Usage​

getEditorButtons(options?: {
  autoSave?: boolean,
  resources?: boolean,
  splitTasks?: boolean,
}): IEditorButtonConfig[];

Parameters​

  • options (optional) — an object with the next parameters:
    • autoSave — if false, adds the Save button to the first button group; omit or set to true when the editor saves automatically | PRO feature
    • resources — adds the Resources tab that allows assigning and unassigning resources for the task | PRO feature
    • splitTasks — adds the Segments tab that allows managing task segments | PRO feature

Returns​

Returns an array of objects with the configuration for the Editor topBar buttons:

[
  {
		items: [
			{ /* close icon*/ },
			{ /* spacer */},
			{ /* Delete button*/},
		    { /* Save button*/}, // if autoSave is false
		],
	},
	{/*tabs*/},
]

Example​

<script setup>
  import { Gantt, Editor, getEditorButtons } from "@svar-ui/vue-gantt";
  import { ref } from "vue";

  const api = ref();

  const topBar = getEditorButtons({
    autoSave: false,
    resources: true,
    splitTasks: true,
  });
</script>

<template>
  <Gantt ref="api" :tasks="tasks" :links="links" :scales="scales" />
  <Editor :api="api" :topBar="topBar" />
</template>

Related articles: