docs/schema-builder/index.md

metadata

order: 0
title: 开始使用
mobile: false

SchemaBuilder

简介

JsonSchema 生成器，快速生成 formRender 2.0 表单协议，1.0 版本表单设计器 请访问此链接

注意：

• 目前只有 alpha 版本，已实现内置组件可视化编排，快速生成 JsonSchema，预计 6月底会发布正式包。
• 暂时不支持自定义组件接入，这块功能正在研发中
• 关于设计器定制化的需求，可以在讨论组中 留言

安装

npm i @xrenders/schema-builder --save

项目需要配置

externals: {
  "react": "React",
  "react-dom": "ReactDOM",
}

• 注意：externals 之后需要在 html 里面引入 React、ReactDOM cdn 资源

使用方式

全屏体验

/**
* transform: true
* defaultShowCode: true
* background: 'rgb(204,204,204, .33)'
* padding: 20px
*/
import React from 'react';
import SchemaBuilder from '@xrenders/schema-builder';

const Demo = () => {
  return (
    <div style={{ height: '80vh' }}>
      <SchemaBuilder importBtn={true} exportBtn={true} pubBtn={false} />
    </div>
  );
};

export default Demo;