Skip to main content

topBar

topBar: {
    items: Array<{ comp: string; label?: string; onclick?: Function; key?: string; spacer?: boolean }>
}

this property controls the configuration of the top toolbar in the editor. The default value is an empty object.

Sub-properties​

  • items: An array of items to be displayed in the top bar. Each item can be a component or a configuration object.

Usage​

Adding top bar to editor​

<script>
    import { Editor } from "wx-svelte-editor";

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

<Editor {topBar} />

Adding top bar and using form values in it​

<script>
    import { Editor } from "wx-svelte-editor";
    import { Switch } from "wx-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} />