Zum Hauptinhalt springen

topBar

Beschreibung​

Optional. Steuert die Konfiguration der oberen Symbolleiste im Editor

Verwendung​

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

Parameter​

Der topbar kann folgende Werte annehmen:

  • true – aktiviert die obere Symbolleiste
  • false – blendet die obere Symbolleiste aus
  • ein Objekt mit dem items-Array, wobei jedes Element ein ToolbarItem ist und dieselben Parameter wie items in der Toolbar-Komponente unterstützt

Beispiele​

Obere Symbolleiste zum Editor hinzufügen​

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

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

<Editor {topBar} />

Obere Symbolleiste hinzufügen und Formulardaten darin verwenden​

<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} />