Skip to main content

topBar

Description​

Optional. Controls the configuration of the top toolbar in the editor

Usage​

topBar?: boolean | { items: IToolbarItem[] };

Parameters​

The topBar can take the following values:

  • true - enables the top toolbar
  • false - hides the top toolbar
  • an object with the items array, where each element is a ToolbarItem and supports the same parameters as items in the Toolbar component

Examples​

Adding top bar to editor​

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

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

<template>
    <Editor :topBar="topBar" />
</template>

Adding top bar and using form values in it​

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

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

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

<template>
    <Editor :topBar="topBar" :values="values" />
</template>