폼 레이아웃 구성

폼 구조

editor 위젯은 폼 레이아웃을 구조화하고 구성하는 다양한 방법을 제공합니다. batch, section, 접을 수 있는 accordion 형식의 섹션 등 논리적인 그룹으로 폼을 나눌 수 있습니다. 이러한 유연성 덕분에 개발자는 필드를 그룹화하고 효율적으로 탐색할 수 있는 사용자 친화적인 인터페이스를 만들 수 있습니다. 아래는 지원되는 구성 방법들입니다.

하나의 batch만 표시되도록 폼을 batch로 나누기

editor는 폼 필드를 별도의 batch로 분리하여 한 번에 하나의 batch만 표시할 수 있습니다. 이 방식은 단계별 폼이나 복잡한 폼을 단순화하는 데 유용합니다.

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

<template>
   <Editor :items="items" activeBatch="cfg" />
</template>

이 예제에서 activeBatch 속성은 "cfg"로 설정되어 있으므로 "cfg" batch에 할당된 필드만 표시됩니다. 이 방식은 한 번에 하나씩 표시해야 하는 여러 논리적 섹션이 있는 폼에 적합합니다.

탭 바를 사용하여 batch 간 전환

editor는 batch 간 전환을 위한 탭 기반 탐색을 지원합니다. 이 방법은 사용자가 탭 사이를 탐색해야 하는 여러 섹션이 있는 폼에 적합합니다.

<script setup>
import { ref } from "vue";
import { Editor, registerEditorItem } from "@svar-ui/vue-editor";
import { Tabs, Combo } from "@svar-ui/vue-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 = ref("cfg");
</script>

<template>
   <Editor :items="items" :activeBatch="activeBatch">
      <Tabs :options="options" v-model:value="activeBatch"></Tabs>
   </Editor>
</template>

여기서 Tabs 컴포넌트를 사용하여 사용자가 볼 batch를 선택할 수 있습니다. activeBatch 바인딩은 선택된 탭에 따라 editor가 적절한 필드를 표시하도록 보장합니다.

---

폼 필드를 접을 수 있는 섹션으로 그룹화

editor는 필드를 접을 수 있는 섹션으로 구성하는 것을 지원하여 긴 폼을 더 쉽게 관리할 수 있습니다. 각 섹션은 열거나 닫을 수 있습니다.

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

<template>
   <Editor :items="items" />
</template>

모든 필드는 접을 수 있는 섹션 내에 렌더링됩니다.

"Common settings" 및 "Comments"와 같은 섹션은 접거나 펼칠 수 있어 사용자가 폼의 특정 부분에 집중할 수 있습니다.

---

Accordion 형식의 섹션 표시

Accordion 형식의 섹션은 한 번에 하나의 섹션만 열 수 있습니다. 새 섹션이 열리면 이전에 열려 있던 섹션은 자동으로 접힙니다.

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

<template>
   <Editor :items="items" />
</template>

모든 필드는 접을 수 있는 섹션 내에 렌더링되지만, 한 번에 하나의 섹션만 열 수 있습니다.

이 구성은 한 번에 하나의 섹션 정보만 표시해야 하는 폼에 유용합니다.

Editor에서 모달 형식의 섹션 사용

모달 섹션은 열릴 때 다른 필드를 숨기고, 최상위 필드를 선택된 섹션의 내용으로 대체합니다. 이 방식은 특정 입력 필드에 집중하는 데 유용합니다.

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

<template>
   섹션 내의 필드는 기본적으로 숨겨져 있습니다. 섹션을 클릭하면 최상위 필드가 해당 섹션의 내용으로 대체됩니다.

   <Editor :items="items" />
</template>

이 방식은 섹션이 전체 포커스를 받아야 하여 다른 필드의 방해를 줄여야 하는 폼에 적합합니다.

Editor에서 필드와 섹션 혼합 사용

editor는 항상 표시되는 필드와 접을 수 있는 섹션을 결합하는 것을 지원합니다. 이 방식은 일부 필드가 항상 접근 가능해야 할 때 유용합니다.

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

<template>
   `name` 및 `descr` 필드는 항상 표시되지만, 아래 필드들은 접을 수 있는 섹션 내에 렌더링됩니다.

   <Editor :items="items" />
</template>

이 구성은 특정 중요한 필드가 항상 접근 가능해야 하고, 나머지 필드는 접을 수 있는 섹션으로 그룹화할 수 있는 폼에 적합합니다.

관련 샘플: Layouts