Skip to main content

bottomBar

bottomBar: {
    items: Array<{ comp: string; label?: string; onclick?: () => void }>
}

this property controls the layout and functionality of the bottom toolbar in the editor. The default value is an empty object.

Sub-properties​

  • items: An array of components to be displayed in the bottom bar. Each item can be a component type (e.g., "button" or "spacer"), and buttons can have an optional label and an onclick function.

Usage​

Adding bottom bar to editor​

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

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

<Editor {bottomBar} />

The bottom bar will display a spacer followed by a button that triggers an alert when clicked.