Организация макета формы

Структура формы

Виджет редактора предоставляет несколько способов структурирования и организации макета формы. Он поддерживает разделение формы на логические группы: пакеты (batches), секции или сворачиваемые секции в стиле аккордеона. Такая гибкость позволяет разработчикам создавать удобные интерфейсы, в которых поля можно группировать и удобно перемещаться между ними. Ниже перечислены поддерживаемые конфигурации:

Разделение формы на пакеты с отображением одного пакета

Редактор позволяет разбивать поля формы на отдельные пакеты, при этом одновременно отображается только один из них. Это удобно для создания пошаговых форм или упрощения сложных форм.

import { Editor, registerEditorItem } from "@svar-ui/react-editor";
import { Combo } from "@svar-ui/react-core";

registerEditorItem("combo", Combo);

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" },
    ],
  },
];

export const Example = () => {
  return <Editor items={items} activeBatch="cfg" />;
};

В этом примере свойство activeBatch установлено в значение "cfg", поэтому отображаются только поля, назначенные пакету "cfg". Такой подход идеален для форм с несколькими логическими секциями, которые нужно показывать по одной.

Использование панели вкладок для переключения между пакетами

Редактор поддерживает навигацию на основе вкладок для переключения между пакетами. Этот способ подходит для форм с несколькими секциями, между которыми пользователю нужно переключаться.

import { useState } from "react";
import { Editor, registerEditorItem } from "@svar-ui/react-editor";
import { Tabs, Combo } from "@svar-ui/react-core";

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" },
    ],
  },
];

export const ExampleTabs = () => {
  const [activeBatch, setActiveBatch] = useState("cfg");

  return (
    <Editor items={items} activeBatch={activeBatch}>
      <Tabs options={options} value={activeBatch} onChange={setActiveBatch} />
    </Editor>
  );
};

Здесь компонент Tabs используется для того, чтобы пользователь мог выбрать отображаемый пакет. Пара activeBatch state и value/onChange обеспечивает отображение редактором соответствующих полей в зависимости от выбранной вкладки.

---

Группировка полей формы в сворачиваемые секции

Редактор поддерживает организацию полей в сворачиваемые секции, что упрощает работу с длинными формами. Каждую секцию можно раскрыть или свернуть.

import { Editor, registerEditorItem } from "@svar-ui/react-editor";
import { Comments } from "@svar-ui/react-comments";

registerEditorItem("comments", Comments);

const items = [
  {
    comp: "section",
    key: "common-section",
    label: "Common settings",
  },
  {
    comp: "text",
    key: "name",
    label: "Name",
  },
  {
    comp: "textarea",
    key: "descr",
    label: "Description",
  },
  {
    comp: "section",
    key: "comments-section",
    label: "Comments",
  },
  {
    comp: "comments",
    key: "comments",
    section: "comments-section",
  },
];

export const ExampleSections = () => {
  return <Editor items={items} />;
};

Все поля отображаются внутри сворачиваемых секций.

Секции "Common settings" и "Comments" можно сворачивать и раскрывать, позволяя пользователям сосредоточиться на определённых частях формы.

---

Отображение секций в стиле аккордеона

Секции в стиле аккордеона позволяют открывать только одну секцию одновременно. При открытии новой секции ранее открытая автоматически сворачивается.

import { Editor, registerEditorItem } from "@svar-ui/react-editor";
import { Comments } from "@svar-ui/react-comments";

registerEditorItem("comments", Comments);

const items = [
  {
    comp: "section",
    key: "common-section",
    label: "Common settings",
    sectionMode: "accordion",
  },
  {
    comp: "text",
    key: "name",
    label: "Name",
  },
  {
    comp: "textarea",
    key: "descr",
    label: "Description",
  },
  {
    comp: "section",
    key: "comments-section",
    label: "Comments",
    sectionMode: "accordion",
  },
  {
    comp: "comments",
    key: "comments",
    section: "comments-section",
  },
];

export const ExampleAccordion = () => {
  return <Editor items={items} />;
};

Все поля отображаются внутри сворачиваемых секций, но одновременно может быть открыта только одна секция.

Эта конфигурация удобна для форм, в которых в каждый момент времени нужно отображать содержимое только одной секции.

Использование секций в модальном стиле в редакторе

Модальные секции скрывают остальные поля при открытии, заменяя поля верхнего уровня содержимым выбранной секции. Это удобно для фокусировки на конкретном наборе полей ввода.

import { Editor, registerEditorItem } from "@svar-ui/react-editor";
import { Comments } from "@svar-ui/react-comments";

registerEditorItem("comments", Comments);

const items = [
  {
    comp: "text",
    key: "name",
    label: "Name",
  },
  {
    comp: "textarea",
    key: "descr",
    label: "Description",
  },
  {
    comp: "section",
    key: "comments-section",
    label: "Comments",
    sectionMode: "exclusive",
  },
  {
    comp: "comments",
    key: "comments",
    section: "comments-section",
  },
];

export const ExampleModalSections = () => {
  return <Editor items={items} />;
};

Поля внутри секций по умолчанию скрыты. При нажатии на секцию поля верхнего уровня заменяются содержимым этой секции.

Такой подход идеален для форм, в которых секции должны занимать всё внимание пользователя, устраняя отвлечение на другие поля.

Совмещение полей и секций в редакторе

Редактор позволяет сочетать всегда видимые поля со сворачиваемыми секциями. Это удобно, когда некоторые поля должны оставаться доступными в любой момент.

import { Editor, registerEditorItem } from "@svar-ui/react-editor";
import { Comments } from "@svar-ui/react-comments";

registerEditorItem("comments", Comments);

const items = [
  {
    comp: "text",
    key: "name",
    label: "Name",
  },
  {
    comp: "textarea",
    key: "descr",
    label: "Description",
  },
  {
    comp: "section",
    key: "comments-section",
    label: "Comments",
  },
  {
    comp: "comments",
    key: "comments",
    section: "comments-section",
  },
];

export const ExampleMixed = () => {
  return <Editor items={items} />;
};

Поля name и descr всегда видимы, тогда как поля ниже отображаются внутри сворачиваемой секции.

Эта конфигурация подходит для форм, в которых определённые ключевые поля должны оставаться доступными, а остальные можно сгруппировать в сворачиваемые секции.

Связанный пример: Layouts