items

설명

선택 사항. Editor에서 렌더링할 컴포넌트를 정의합니다

사용법

items?: {
   comp?: string | Component;
   key?: string;
   label?: string;
   labelTemplate?: (value: any) => string;
   column?: "right" | "left";
   batch?: string | number;
   hidden?: boolean;
   section?: string;
   sectionMode?: "accordion" | "exclusive";
   activeSection?: boolean;
   options?: {
      id?: string | number;
      label?: string;
      [key: string]: any;
   }[];
   required?: boolean;
   validation?: (value: any) => boolean;
   validationMessage?: string;
   config?: {
      [key: string]: any;
   };
   [key: string]: any;
	}[];

파라미터

• comp – (필수) 컴포넌트 유형(예: "text", "textarea", "select") 또는 Svelte 컴포넌트를 지정합니다. 컴포넌트를 찾을 수 없거나 제공되지 않은 경우 "text"가 사용됩니다.
• key – (필수) 아이템을 editor의 values 객체 내 속성에 바인딩하는 고유 키
• label – (선택 사항) 컨트롤 옆에 표시되는 텍스트 레이블
• labelTemplate – (선택 사항) 현재 값을 기반으로 커스텀 레이블 문자열을 반환하는 함수
• column – (선택 사항) 컨트롤이 렌더링될 열을 정의합니다: "left" | "right"
• batch – (선택 사항) 일괄 렌더링 또는 처리를 위해 아이템을 그룹화합니다
• hidden – (선택 사항) true이면 아이템이 렌더링되지 않습니다
• section – (선택 사항) 아이템을 이름이 지정된 섹션에 할당합니다
• sectionMode – (선택 사항) 접을 수 있는 섹션의 동작을 정의합니다:
  • "accordion" – 여러 섹션을 동시에 열어 둘 수 있습니다
  • "exclusive" – 한 번에 하나의 섹션만 열어 둘 수 있습니다
• activeSection – (선택 사항) true이면 섹션이 기본적으로 펼쳐집니다
• options – (선택 사항) 사용 가능한 옵션 목록을 정의합니다. select, radio 등의 컴포넌트에서 사용됩니다.
• required – (선택 사항) 필드를 필수로 표시합니다
• validation – (선택 사항) 커스텀 유효성 검사 함수입니다. 유효한 값에 대해 true를, 그렇지 않으면 false를 반환해야 합니다
• validationMessage – (선택 사항) 유효성 검사 실패 시 표시되는 메시지
• config – (선택 사항) 컴포넌트에 직접 전달되는 임의의 설정 객체
• [key: string] – (선택 사항) editor 아이템에 추가 속성이나 properties를 첨부할 수 있습니다

예제

editor에서 편집 가능한 텍스트 컨트롤 렌더링

<script>
   import { Editor } from "@svar-ui/svelte-editor";

   const items = [
      {
        comp: "text",
        key: "name",
        label: "Name"
      }
   ];
</script>

<Editor {items} />

editor에서 읽기 전용 블록 렌더링

<script>
   import { Editor } from "@svar-ui/svelte-editor";

   const items = [
      {
        comp: "readonly",
        key: "name",
        label: "Name"
      }
   ];
</script>

<Editor {items} />

editor에서 라디오 버튼 렌더링

<script>
   import { RadioButtonGroup } from "@svar-ui/svelte-core";
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";

   registerEditorItem("radio-group", RadioButtonGroup);

   const items = [
      {
        comp: "radio-group",
        key: "name",
        label: "Name",
        options: [
           {
              value: "s",
              label: "Scorpions",
           },
           {
              value: "m",
              label: "Muse",
           },
        ]
      }
   ];
</script>

<Editor {items} />

editor에서 textarea 컨트롤 렌더링

<script>
   import { Editor } from "@svar-ui/svelte-editor";

   registerEditorItem("textarea", TextArea);

   const items = [
      {
        comp: "textarea",
        key: "name",
        label: "Name"
      }
   ];
</script>

<Editor {items} />

editor에서 슬라이더 컨트롤 렌더링

<script>
   import { Slider } from "@svar-ui/svelte-core";
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";

   registerEditorItem("slider", Slider);

   const items = [
      {
        comp: "slider",
        key: "name",
        label: "Name"
      }
   ];
</script>

<Editor {items} />

editor에서 rich select 컨트롤 렌더링

<script>
   import { RichSelect } from "@svar-ui/svelte-core";
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";

   registerEditorItem("select", RichSelect);

   const items = [
      {
        comp: "select",
        key: "name",
        label: "Name",
        options: [
           { id: 1, label: "High", color: "#DF282F" },
           { id: 2, label: "Medium", color: "#FFC975" },
           { id: 3, label: "Low", color: "#65D3B3" },
        ]
      }
   ];
</script>

<Editor {items} />

editor에서 datepicker 컨트롤 렌더링

<script>
   import { DatePicker } from "@svar-ui/svelte-core";
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";

   registerEditorItem("datepicker", DatePicker);

   const items = [
      {
        comp: "datepicker",
        key: "name",
        label: "Name"
      }
   ];
</script>

<Editor {items} />

editor에서 colorpicker 컨트롤 렌더링

<script>
   import { ColorSelect } from "@svar-ui/svelte-core";
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";

   registerEditorItem("colorselect", ColorSelect);

   const items = [
      {
        comp: "colorselect",
        key: "name",
        label: "Name"
      }
   ];
</script>

<Editor {items} />

editor에 댓글 추가

<script>
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
   import { Comments } from "@svar-ui/svelte-comments";

   registerEditorItem("comments", Comments);

   const users = [
      {
        id: 1,
        name: "John Doe",
        avatar: "https://via.placeholder.com/150",
      },
   ];

   const items = [
      {
        comp: "comments",
        key: "comments",
        label: "Comments",
        users,
        activeUser: 1,
      },

   ];

   const data = {
      comments: [
        {
           id: 1,
           user: 1,
           content: "Greetings, fellow colleagues.",
           date: new Date(),
        },
      ],
   }
</script>

<Editor {items} values={data} />

editor에 태스크 목록 추가

<script>
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
   import { TaskList } from "@svar-ui/svelte-tasklist";

   registerEditorItem("tasks", Tasklist);
   const items = [
      {
        comp: "tasks",
        key: "task",
        label: "Task",
      },
   ];

   const data = {
      task: [
        {
           id: 1,
           title: "Task 1",
           status: 1,
        },
      ],
   }
</script>

<Editor {items} values={data} />

폼을 섹션으로 분할

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

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

필드를 필수로 표시

<script>
   import { Editor } from "@svar-ui/svelte-editor";

   const items = [
      {
        comp: "text",
        key: "name",
        required: true,
      },
   ];
</script>

<Editor {items} />

이 예제는 editor에서 name 필드를 필수로 표시하는 방법을 보여줍니다.

필드에 유효성 검사 규칙 정의

<script>
   import { Editor } from "@svar-ui/svelte-editor";

   const items = [
      { comp: "text", key: "name", label: "Name",
        validation: val => {
          const regEx = /^[a-zA-Z]+$/;
           return val && regEx.test(val);
        },
        validationMessage: "wrong name format"
      }
   ];
</script>

<Editor {items} />

이 예제는 "Name" 필드에 특정 정규 표현식과 일치하는 입력을 요구하는 유효성 검사 규칙을 정의합니다. 입력이 일치하지 않으면 유효성 검사 메시지 "wrong name format"이 표시됩니다.