입력 컨트롤 렌더링

필드 렌더링

Editor 위젯은 다양한 입력 컨트롤을 렌더링하는 기능을 제공합니다. 이 컨트롤에는 기본 입력 유형, 고급 컴포넌트, 그리고 댓글 및 작업 목록과 같은 특수 위젯이 포함됩니다. 각 컨트롤은 특정 사용 사례에 맞게 레이블, 키 및 추가 속성으로 커스터마이징할 수 있습니다.

Editor에서 색상 선택 컨트롤 렌더링

@svar-ui/svelte-core에서 ColorSelect 컨트롤을 가져와 Editor 아이템으로 등록합니다:

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

  registerEditorItem("colorselect", ColorSelect);

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

<Editor {items} />

색상 선택 컨트롤은 사용자가 그래픽 인터페이스를 통해 색상을 선택할 수 있도록 합니다. 테마 커스터마이징이나 카테고리에 색상을 지정하는 등 색상을 정의해야 하는 경우에 적합합니다.

Editor에서 날짜 선택 컨트롤 렌더링

@svar-ui/svelte-core에서 DatePicker 컨트롤을 가져와 Editor 아이템으로 등록합니다:

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

  registerEditorItem("datepicker", DatePicker);

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

<Editor {items} />

날짜 선택 컨트롤은 사용자가 캘린더 인터페이스에서 날짜를 선택할 수 있도록 합니다. 일정 관리, 마감일 설정 또는 날짜 관련 입력이 필요한 시나리오에 유용합니다.

Editor에서 라디오 버튼 렌더링

@svar-ui/svelte-core에서 RadioButtonGroup 컨트롤을 가져와 Editor 아이템으로 등록합니다:

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

  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에서 읽기 전용 블록 렌더링

이 컨트롤은 내장 컨트롤로 별도의 등록이 필요하지 않습니다.

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

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

<Editor {items} />

읽기 전용 블록은 편집할 수 없는 정적 정보를 표시하는 데 사용됩니다. 미리 정의된 데이터나 시스템이 생성한 데이터를 표시하는 데 유용합니다.

Editor에서 Rich Select 컨트롤 렌더링

@svar-ui/svelte-core에서 RichSelect 컨트롤을 가져와 Editor 아이템으로 등록합니다:

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

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

Rich Select 컨트롤은 색상이나 아이콘 등의 추가 속성을 통해 더 나은 시각화와 함께 목록에서 옵션을 선택할 수 있도록 합니다. 우선순위 선택이나 분류 작업에 적합합니다.

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

@svar-ui/svelte-core에서 Slider 컨트롤을 가져와 Editor 아이템으로 등록합니다:

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

  registerEditorItem("slider", Slider);

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

<Editor {items} />

슬라이더 컨트롤은 미리 정의된 범위 내에서 값을 선택하는 데 사용됩니다. 볼륨, 밝기 또는 평점 시스템과 같은 설정에 주로 활용됩니다.

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

이 컨트롤은 내장 컨트롤로 별도의 등록이 필요하지 않습니다.

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

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

<Editor {items} />

편집 가능한 텍스트 컨트롤은 한 줄 텍스트를 입력하기 위한 기본 입력 필드입니다. 이름, 제목 또는 간단한 설명 등 단순 데이터 입력에 적합합니다.

Editor에서 Textarea 컨트롤 렌더링

이 컨트롤은 내장 컨트롤로 별도의 등록이 필요하지 않습니다.

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

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

<Editor {items} />

Textarea 컨트롤은 더 긴 텍스트를 입력하기 위한 여러 줄 입력 필드를 제공합니다. 댓글, 설명 또는 메모 작성에 적합합니다.

Editor에 댓글 추가

@svar-ui/svelte-comments에서 Comments 위젯을 가져와 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} />

Comments 위젯은 사용자가 에디터 내에서 댓글을 추가, 조회 및 관리할 수 있도록 합니다. 사용자 식별 및 타임스탬프 기능을 갖추고 있어 협업 워크플로우나 피드백 시스템에 유용합니다.

관련 샘플: Comments

Editor에 작업 목록 추가

@svar-ui/svelte-tasklist에서 TaskList 위젯을 가져와 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} />

작업 목록 위젯은 에디터에 작업 관리 기능을 통합합니다. 작업 제목 및 상태 업데이트 필드를 통해 작업을 생성하고 추적하는 데 적합합니다.

관련 샘플: Tasklist