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

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

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

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

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

<script>
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
   import { Combo } from "@svar-ui/svelte-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" },
        ],
      },
   ];

</script>

<Editor {items} activeBatch="cfg" />

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

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

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

<script>
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
   import { Tabs, Combo } from "@svar-ui/svelte-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" },
        ],
      },
   ];

   const activeBatch = $state("cfg");
</script>

<Editor {items} {activeBatch}>
   <Tabs {options} bind:value={activeBatch}></Tabs>
</Editor>

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

---

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

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

<script>
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
   import { Comments } from "@svar-ui/svelte-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",
      }
   ];
</script>

<Editor {items} />

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

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

---

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

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

<script>
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
   import { Comments } from "@svar-ui/svelte-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",
      }
   ];
</script>

<Editor {items} />

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

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

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

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

<script>
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
   import { Comments } from "@svar-ui/svelte-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",
      }
   ];
</script>

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

<Editor {items} />

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

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

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

<script>
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
   import { Comments } from "@svar-ui/svelte-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",
      }
   ];
</script>

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

<Editor {items} />

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

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