본문으로 건너뛰기

시작하기

첫 번째 단계​

위젯을 시작하려면 프로젝트에 필요한 패키지를 추가하세요.

npm install @svar-ui/svelte-core
npm install @svar-ui/svelte-editor

또는

yarn add @svar-ui/svelte-core
yarn add @svar-ui/svelte-editor
note

패키지가 wx-svelte-editor에서 @svar-ui/svelte-editor로 마이그레이션되었습니다. Svelte SVAR 3.0 업데이트 전까지는 wx-svelte-editor를 계속 게시합니다.

위젯을 프로젝트에 import하세요.

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

<Willow>
  <Editor />
</Willow>

Willow 컴포넌트는 모든 SVAR 위젯에 필요한 스타일을 추가하는 기본 테마 래퍼 역할을 합니다. Editor 컴포넌트는 Willow 없이도 동작하지만 스타일이 적용되지 않으므로 수동으로 스타일을 추가해야 합니다. 애플리케이션의 최상위 레벨에 Willow 태그를 포함하는 것을 권장합니다.

전체 초기화 코드​

위젯이 동작하는 것을 확인하려면 위젯에 몇 가지 항목을 추가하세요.

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

  const items = [
    { comp: "text", key: "name", label: "Name" },
    { comp: "text", key: "descr", label: "Description" },
    { comp: "text", key: "role", label: "Role" }
  ];

  const values = {
    name: "John Doe",
    descr: "Lorem ipsum dolor sit amet",
    role: "admin"
  };
</script>

<Willow>
  <Editor {items} {values} />
</Willow>
노트

올바른 초기화를 위해 애플리케이션의 최상위 레벨에 테마를 적용하는 것을 권장합니다. Editor 컴포넌트를 단독으로 사용하는 경우 반드시 테마로 감싸야 합니다(위 예제에서는 Willow 테마가 적용됩니다).

관련 문서: