폼 레이아웃 구성

폼 구조

editor widget은 폼 레이아웃을 구조화하고 구성하는 다양한 방법을 제공합니다. 배치(batch), 섹션, 또는 접을 수 있는 아코디언 형태의 섹션 등 논리적인 그룹으로 폼을 나눌 수 있습니다. 이러한 유연성을 통해 개발자는 필드를 그룹화하고 효율적으로 탐색할 수 있는 사용자 친화적인 인터페이스를 만들 수 있습니다. 지원되는 구성은 다음과 같습니다:

단일 배치만 표시되도록 폼을 배치로 나누기

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 property는 "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