Skip to main content

layout

Description​

Optional. Controls the layout of editor components

Usage​

layout?: "columns" | "default";

Parameters​

The property takes the next values:

  • "columns" - the components are placed in a two-column layout
  • "default" - (default) components are placed in one column

Examples​

Showing editor in 2 columns​

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

   const items = [
      { comp: "text", key: "name", label: "Name", column: "left" },
      {
        comp: "textarea",
        key: "descr",
        label: "Description",
        column: "left", // move to left column
      },
      { comp: "checkbox", key: "admin", label: "Is Admin" }
   ];
</script>

<Editor {items} values={data} layout="columns" />

This example shows how to define items in the left or right column by using the column property that has "right" (default) and "left" values.