Skip to main content

activeBatch

activeBatch: string

this property controls which batch of inputs is currently active in the editor. The default value is undefined.

Usage​

Showing one batch at a time​

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

    registerEditorItem("combo", Combo);

    const batchItems = [
        {
            comp: "text",
            key: "name",
            batch: "main",
            label: "Name",
        },
        {
            key: "theme",
            batch: "cfg",
            comp: "combo",
            label: "Theme",
            options: [
                { id: "light", label: "Light" },
                { id: "dark", label: "Dark" },
            ],
        },
    ];
    
</script>

<Editor {items} activeBatch="cfg" />

Using tabbar to control visibility​

<script>
    import { Combo, Tabs } from "wx-svelte-core";
    import { Editor } from "wx-svelte-editor";

    registerEditorItem("combo", Combo);

    const options = [
        {
            id: "main",
            label: "Personal",
        },
        {
            id: "cfg",
            label: "Settings",
        },
    ];

    const items = [
        {
            comp: "text",
            key: "name",
            batch: "main",
            label: "Name",
        },
        {
            key: "theme",
            batch: "cfg",
            comp: "combo",
            label: "Theme",
            options: [
                { id: "light", label: "Light" },
                { id: "dark", label: "Dark" },
            ],
        },
    ];

    const activeBatch = $state("cfg");
</script>

<Editor {items} {activeBatch}>
    <Tabs {options} bind:value={activeBatch}></Tabs>
</Editor>