自定义主题

我们将从下面几个方面分开介绍，从而最终学会以下能力

• 开发的自定义主题对象；
• 快速从零开发一个自定义主题包；
• 如何调试自定义主题包；
• 自定义主题如何适配表单设计器；

开发前须知

开发自定义主题前，需要了解以下概念

• 自定义组件
• 主题

开发

开发自定义主题对象

按照以下步骤开发自定义主题对象

1. 开发自定义组件

   假设有自定义组件 numberField、textField

2. 设置主题名字

   根据业务场景或使用 ui 库名字设置一个主题名字；

   假设自定义主题名字为 customTheme
   customTheme

   export default {
       // 设置自定义主题名字为 customTheme
       theme: 'customTheme',
   }

3. 导入自定义组件并配置自定义组件的 type 值

   导入 numberField 和 textField 自定义组件，并分别设置它们的 ui.type 为 number 和 text

   customTheme

   import { numberField } from './numberField'
   import { textField } from './textField'
   
   export default {
       //自定义组件numberField 的type类型是number（type类型随意取，保证和unitedSchema中ui.type一致即可）
       number: numberField,
       //自定义组件textField 的type类型是text（type类型随意取，保证和unitedSchema中ui.type一致即可）
       text: textField,
       theme: 'customTheme',
   }

4. 导入主题 导入自定义主题 customTheme

   App.tsx

   import DripForm from '@jdfed/drip-form'
   import antd from '@jdfed/drip-form-theme-antd'
   import unitedSchema from './unitedSchema'
   //引入自定义主题对象
   import customTheme from './customTheme'
   import '@jdfed/drip-form/dist/index.css'
   import '@jdfed/drip-form-theme-antd/dist/index.css'
   import 'antd/dist/antd.css'
   
   function App() {
       return (
           <DripForm
               // 表单配置文件
               unitedSchema={unitedSchema}
               // 导入antd主题和自定义主题 customTheme
               uiComponents={{ antd, customTheme }}
           ></DripForm>
       )
   }
   
   export default App

   代码沙盒：

开发自定义主题包

文档编写中

注意事项

1. 主题名字是任意取的，不一定是 customTheme

2. 导入主题时，uiComponents对象 key 值，需要和主题名一致

   下面代码高亮处名称需一致
   App.tsx

   <DripForm
       unitedSchema={unitedSchema}
       uiComponents={{
           antd,
           customTheme,
       }}
   ></DripForm>
   customTheme

    export default {
       number: numberField,
       text: textField,
       theme: 'customTheme',
   }