본문으로 건너뛰기

Editor Widget

첫 번째 단계​

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

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

또는 yarn을 사용하는 경우:

yarn add @svar-ui/react-core
yarn add @svar-ui/react-editor

프로젝트에 위젯을 import합니다. 모든 요소가 올바르게 표시되려면 테마와 스타일도 함께 import해야 합니다.

import { Willow } from '@svar-ui/react-core'; //import the theme
import { Editor } from '@svar-ui/react-editor';
import "@svar-ui/react-editor/all.css"; //import styles

export default function App() {
  return (
    <Willow>
      <Editor />
    </Willow>
  );
}

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

전체 초기화 코드​

위젯이 동작하는 모습을 보려면 위젯에 몇 가지 items를 추가하세요.

import { Willow } from '@svar-ui/react-core';
import { Editor } from '@svar-ui/react-editor';
import "@svar-ui/react-editor/all.css";

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"
};

export default function App() {
  return (
    <Willow>
      <Editor items={items} values={values} />
    </Willow>
  );
}
노트

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

관련 문서: