组织表单布局

表单结构

Editor widget 提供了多种构建和组织表单布局的方式。它支持将表单划分为逻辑分组，例如批次、分区或可折叠的手风琴式分区。这种灵活性使开发者能够创建用户友好的界面，让字段可以高效地分组和导航。以下是支持的配置方式：

将表单拆分为批次并一次显示单个批次

Editor 允许将表单字段拆分为独立的批次，每次只显示其中一个批次。这适用于创建分步表单或简化复杂表单。

<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" 批次的字段会显示。这种方式非常适合包含多个逻辑分区且需要逐一展示的表单。

使用标签栏在批次之间切换

Editor 支持基于标签的导航方式，用于在批次之间切换。此方法适用于包含多个分区且用户需要在标签之间导航的表单。

<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 绑定确保 Editor 根据所选标签显示对应的字段。

---

将表单字段分组为可折叠分区

Editor 支持将字段组织到可折叠分区中，便于管理较长的表单。每个分区都可以展开或折叠。

<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} />

所有字段均在可折叠分区内渲染，但每次只能展开一个分区。

此配置适用于每次只需显示一个分区内容的表单。

在 Editor 中使用模态式分区

模态分区打开时会隐藏其他字段，将顶层字段替换为所选分区的内容。这适用于需要专注于特定输入项的场景。

<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} />

此方式适用于分区需要获得完全焦点、减少其他字段干扰的表单。

在 Editor 中混合使用字段与分区

Editor 允许将始终可见的字段与可折叠分区结合使用。这适用于某些字段需要始终保持可访问的场景。

<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