Skip to main content

layout

Sets how visible items are arranged in the form body. "columns" splits them into a left and right pane; any other value renders a single column.

Usage​

layout?: string;
  • "columns" - items with column: "left" render in the left pane; all other visible items render in the right pane.
  • any other value (default "default") - renders the single-column form.

Default: "default". Form does not use this prop.

Example​

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

const items = [
  { comp: "text", key: "name", label: "Name", column: "left" },
  { comp: "textarea", key: "bio", label: "Bio", column: "left" },
  { comp: "text", key: "email", label: "Email" },
  { comp: "checkbox", key: "admin", label: "Is Admin" },
];
const values = { name: "John Doe", admin: true };
</script>

<template>
  <Editor placement="modal" layout="columns" :items="items" :values="values" />
</template>