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​

import { Editor } from "@svar-ui/react-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" }
];

export default function App() {
  const data = {
    name: "",
    descr: "",
    admin: false
  };

  return <Editor items={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.