跳到主要内容

Editor Widget

第一步​

要开始使用该 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

将 widget 导入项目。为确保所有元素正确显示，还需导入主题和样式。

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 widgets 添加必要的样式。Editor 组件可以不使用它运行，但将缺少样式，需要手动添加样式。建议将 Willow 标签放置在应用程序的顶层。

完整初始化代码​

要查看 widget 的实际效果，请向 widget 中添加一些条目。

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 主题）。

相关文章：