Skip to main content

Configuring toolbar

You can add toolbars to the top or bottom of the editor. Toolbars support interactive elements such as buttons, labels, menus, and form controls, giving users quick access to actions or settings.

Add a top toolbar​

Pass a topBar config object to add a toolbar above the editor fields. The items array defines the toolbar's contents:

<script>
  import { Editor } from "@svar-ui/svelte-editor";

  const topBar = {
    items: [
      { comp: "spacer" },
      { comp: "button", text: "Click me", onclick: () => alert("clicked") },
    ],
  };
</script>

<Editor {topBar} />

In this example, the toolbar includes a spacer for layout adjustment and a button labeled "Click me." This setup is useful for placing critical actions or controls at the top of the editor for easy access.

topbar

Add a bottom toolbar​

Pass a bottomBar config object to add a toolbar below the editor fields:

<script>
  import { Editor } from "@svar-ui/svelte-editor";

  const bottomBar = {
    items: [
      { comp: "spacer" },
      { comp: "button", text: "Click me", handler: () => alert("clicked") },
    ],
  };
</script>

<Editor {bottomBar} />

The bottom toolbar has the same structure as the top toolbar. Use it for actions or settings that are less critical but still need to be readily available.

Bind toolbar items to form values​

Set a key on any toolbar item to link it to the corresponding form value. This lets toolbar controls read and update form data directly:

<script>
  import { Editor } from "@svar-ui/svelte-editor";
  import { Switch } from "@svar-ui/svelte-core";

  const topBar = {
    items: [
      { comp: "label", spacer: true, key: "label" },
      { comp: Switch, key: "state" },
    ],
  };

  const values = {
    label: "Product N1",
    state: false
  };
</script>

<Editor {topBar} {values} />

In this example, the label displays the current value of the "label" key, and the switch reads and toggles the "state" key. This is ideal for displaying and adjusting settings or metadata directly within the toolbar.

toolbar_values

Create an action menu in the toolbar​

Set collapsed: true on a toolbar item to turn it into a dropdown menu. Items inside the items array become menu entries:

<script>
  import { Editor } from "@svar-ui/svelte-editor";

  const topBar={
    items: [
      {
        comp: "label",
        spacer: true,
        text: "Item X12-A",
      },
      { comp: "separator" },
      {
        icon: "wxi-dots-v",
        collapsed: true,
        layout: "column",
        items: [
          {
           id: "done",
           comp: "item",
           text: "Mark as done",
           handler: buttonClick,
          },
          {
           id: "delete",
           comp: "button",
           type: "danger",
           text: "Delete the item",
           handler: buttonClick,
          },
        ],
      },
    ]
  };
</script>

<Editor {topBar} />

In this example, the menu includes a label, a separator, and a dropdown that opens from the wxi-dots-v icon. The dropdown contains "Mark as done" and "Delete the item," each with a handler function. This is particularly useful for providing contextual actions without cluttering the toolbar.

actionmenu

Related sample: Toolbar values