Skip to main content

children

Renders custom content above the generated fields, inside the editor's content area. Use it to build multi-step or tabbed forms - a tab bar or wizard stepper that switches which group of fields the user sees by driving activeBatch - or to add your own header, instructions, or summary above the fields.

Usage​

children?: Slot;

Example​

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

  const items = [
    { comp: "text", key: "name", batch: "main", label: "Name" },
    { comp: "text", key: "theme", batch: "cfg", label: "Theme" }
  ];

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

  const activeBatch = ref("main");
</script>

<template>
  <Editor :items="items" :values="values" :activeBatch="activeBatch" :topBar="false">
    <Tabs :options="tabs" v-model:value="activeBatch" />
  </Editor>
</template>