order: 8 group: order: 3 title: 高级用法

toc: content

展示的最佳实践

displayType

  • 类型：’row’ | ‘column’ | ‘inline’
  • 默认值： ‘column’
  • 说明：用于控制标签的位置。没有特殊情况，一般建议使用默认的 display: column。注意 displayType 既是 props，又是 schema 的字段，可以
  1. import React from 'react';
  2. import Form from '../demo/display';
  4. const schema = displayType => ({
  5.   type: 'object',
  6.   displayType: displayType,
  7.   properties: {
  8.     range1: {
  9.       title: '日期',
  10.       type: 'range',
  11.       format: 'date',
  12.     },
  13.     objectName: {
  14.       title: '对象',
  15.       bind: 'obj',
  16.       description: '这是一个对象类型',
  17.       type: 'object',
  18.       collapsed: false,
  19.       properties: {
  20.         input1: {
  21.           title: '简单输入框',
  22.           type: 'string',
  23.           required: true,
  24.         },
  25.         select1: {
  26.           title: '单选',
  27.           type: 'string',
  28.           enum: ['a', 'b', 'c'],
  29.           enumNames: ['早', '中', '晚'],
  30.         },
  31.       },
  32.     },
  33.   },
  34. });
  36. export default () => (
  37.   <div>
  38.     <h2>display: row</h2>
  39.     <Form schema={schema('row')} />
  40.     <h2>display: column</h2>
  41.     <Form schema={schema('column')} />
  42.   </div>
  43. );

readOnly

新增了只读模式，在 \

组件上用 props 声明

  1. import React from 'react';
  2. import Form from '../demo/display';
  4. const schema = {
  5.   type: 'object',
  6.   displayType: 'row',
  7.   properties: {
  8.     aa: {
  9.       title: '对象',
  10.       type: 'object',
  11.       properties: {
  12.         input1: {
  13.           title: '简单输入框',
  14.           type: 'string',
  15.           default: 'hello world',
  16.           required: true,
  17.         },
  18.         check: {
  19.           title: 'box',
  20.           type: 'boolean',
  21.           default: true,
  22.         },
  23.         select1: {
  24.           title: '单选',
  25.           type: 'string',
  26.           enum: ['a', 'b', 'c'],
  27.           enumNames: ['早', '中', '晚'],
  28.           default: 'a',
  29.         },
  30.       },
  31.     },
  32.   },
  33. };
  35. export default () => <Form readOnly schema={schema} />;

labelWidth

标签的宽度，可以在顶层用 props 声明，或者在每个 schema 中单独声明

width

元素的宽度，在每个 schema 中单独声明。没有特别情况，建议一行一个元素（即默认的 100%），符合用户填写表单的习惯

  1. import React from 'react';
  2. import Form from '../demo/display';
  4. const schema = {
  5.   type: 'object',
  6.   displayType: 'row',
  7.   properties: {
  8.     aa: {
  9.       title: '对象',
  10.       type: 'object',
  11.       properties: {
  12.         input1: {
  13.           title: '简单输入框',
  14.           type: 'string',
  15.           default: 'hello world',
  16.           required: true,
  17.           width: '50%',
  18.         },
  19.         check: {
  20.           title: 'box',
  21.           type: 'boolean',
  22.           default: true,
  23.           width: '50%',
  24.           labelWidth: 6,
  25.         },
  26.         select1: {
  27.           title: '单选',
  28.           type: 'string',
  29.           enum: ['a', 'b', 'c'],
  30.           enumNames: ['早', '中', '晚'],
  31.           default: 'a',
  32.         },
  33.       },
  34.     },
  35.   },
  36. };
  38. export default () => <Form labelWidth="200" schema={schema} />;

列表的展示

列表的展示对于简单需求占位太多，复杂需求定制不够一直是痛点。所以我们给出了 5 种展示，充分满足从极简到复杂的所有需求。详见列表展示

  1. 默认展示使用 widget: ‘cardList’，卡片类型，用于展示数量不太多但结构复杂的 list
  1. import React from 'react';
  2. import Form from '../demo/display';
  4. const schema = {
  5.   type: 'object',
  6.   properties: {
  7.     listName2: {
  8.       title: '对象数组',
  9.       description: '对象数组嵌套功能',
  10.       type: 'array',
  11.       // widget: 'cardList',
  12.       items: {
  13.         type: 'object',
  14.         properties: {
  15.           input1: {
  16.             title: '简单输入框',
  17.             type: 'string',
  18.             required: true,
  19.           },
  20.           select1: {
  21.             title: '单选',
  22.             type: 'string',
  23.             enum: ['a', 'b', 'c'],
  24.             enumNames: ['早', '中', '晚'],
  25.           },
  26.           obj: {
  27.             title: '对象',
  28.             type: 'object',
  29.             properties: {
  30.               input1: {
  31.                 title: '简单输入框',
  32.                 type: 'string',
  33.                 required: true,
  34.               },
  35.               select1: {
  36.                 title: '单选',
  37.                 type: 'string',
  38.                 enum: ['a', 'b', 'c'],
  39.                 enumNames: ['早', '中', '晚'],
  40.               },
  41.             },
  42.           },
  43.         },
  44.       },
  45.     },
  46.   },
  47. };
  49. const Demo = () => {
  50.   return <Form schema={schema} />;
  51. };
  53. export default Demo;
  1. widget: ‘simpleList’ 用于展示每行只有 1-3 个简单元素的情况
  1. import React from 'react';
  2. import Form from '../demo/display';
  4. const schema = {
  5.   type: 'object',
  6.   properties: {
  7.     listName2: {
  8.       title: '对象数组',
  9.       description: '对象数组嵌套功能',
  10.       type: 'array',
  11.       widget: 'simpleList',
  12.       items: {
  13.         type: 'object',
  14.         properties: {
  15.           input1: {
  16.             title: '简单输入框',
  17.             type: 'string',
  18.             required: true,
  19.           },
  20.           select1: {
  21.             title: '单选',
  22.             type: 'string',
  23.             enum: ['a', 'b', 'c'],
  24.             enumNames: ['早', '中', '晚'],
  25.           },
  26.         },
  27.       },
  28.     },
  29.   },
  30. };
  32. const Demo = () => {
  33.   return <Form schema={schema} />;
  34. };
  36. export default Demo;
  1. widget: ‘tableList’ 用于展示每行只有 3 - n 个简单元素的情况，特别是数据量很大需要分页的
  1. import React from 'react';
  2. import Form from '../demo/display';
  4. const schema = {
  5.   type: 'object',
  6.   properties: {
  7.     listName2: {
  8.       title: '对象数组',
  9.       description: '对象数组嵌套功能',
  10.       type: 'array',
  11.       widget: 'tableList',
  12.       items: {
  13.         type: 'object',
  14.         properties: {
  15.           input1: {
  16.             title: '简单输入框',
  17.             type: 'string',
  18.             required: true,
  19.           },
  20.           input2: {
  21.             title: '简单输入框2',
  22.             type: 'string',
  23.           },
  24.           input3: {
  25.             title: '简单输入框3',
  26.             type: 'string',
  27.           },
  28.           select1: {
  29.             title: '单选',
  30.             type: 'string',
  31.             enum: ['a', 'b', 'c'],
  32.             enumNames: ['早', '中', '晚'],
  33.             widget: 'select',
  34.           },
  35.         },
  36.       },
  37.     },
  38.   },
  39. };
  41. const Demo = () => {
  42.   return <Form schema={schema} />;
  43. };
  45. export default Demo;
  1. widget: ‘drawerList’ 用于展示存在列表套列表，列表套对象等复杂元素的情况
  1. import React from 'react';
  2. import Form from '../demo/display';
  4. const schema = {
  5.   type: 'object',
  6.   properties: {
  7.     listName2: {
  8.       title: '对象数组',
  9.       description: '对象数组嵌套功能',
  10.       type: 'array',
  11.       widget: 'drawerList',
  12.       items: {
  13.         type: 'object',
  14.         properties: {
  15.           input1: {
  16.             title: '简单输入框',
  17.             type: 'string',
  18.             required: true,
  19.           },
  20.           select1: {
  21.             title: '单选',
  22.             type: 'string',
  23.             enum: ['a', 'b', 'c'],
  24.             enumNames: ['早', '中', '晚'],
  25.           },
  26.           listName2: {
  27.             title: '对象数组',
  28.             description: '对象数组嵌套功能',
  29.             type: 'array',
  30.             widget: 'simpleList',
  31.             props: {
  32.               hideMove: true,
  33.             },
  34.             items: {
  35.               type: 'object',
  36.               properties: {
  37.                 input1: {
  38.                   title: '简单输入框',
  39.                   type: 'string',
  40.                   required: true,
  41.                 },
  42.                 select1: {
  43.                   title: '单选',
  44.                   type: 'string',
  45.                   enum: ['a', 'b', 'c'],
  46.                   enumNames: ['早', '中', '晚'],
  47.                 },
  48.               },
  49.             },
  50.           },
  51.         },
  52.       },
  53.     },
  54.   },
  55. };
  57. const Demo = () => {
  58.   return <Form schema={schema} />;
  59. };
  61. export default Demo;

主题设置

对于嵌套类型的表单，我们内置了三种主题，分别为 collapse | card | tile, 默认为 collapse 主题

  1. 默认样式：theme: 'collapse' ，支持无边框模式: 'collapse:pure'、幽灵模式:'collapse:ghost'
  1. import React from 'react';
  2. import Form from '../demo/display';
  4. const schema = {
  5.   type: 'object',
  6.   displayType: 'row',
  7.   properties: {
  8.     objectName: {
  9.       title: '默认样式',
  10.       bind: 'obj',
  11.       description: '这是一个对象类型',
  12.       type: 'object',
  13.       collapsed: true,
  14.       properties: {
  15.         input1: {
  16.           title: '简单输入框',
  17.           type: 'string',
  18.           required: true,
  19.         },
  20.         select1: {
  21.           title: '单选',
  22.           type: 'string',
  23.           enum: ['a', 'b', 'c'],
  24.           enumNames: ['早', '中', '晚'],
  25.         },
  26.       },
  27.     },
  28.     objectName2: {
  29.       title: '无边框样式',
  30.       bind: 'obj',
  31.       description: '这是一个对象类型',
  32.       type: 'object',
  33.       collapsed: true,
  34.       theme: 'collapse:pure',
  35.       properties: {
  36.         input1: {
  37.           title: '简单输入框',
  38.           type: 'string',
  39.           required: true,
  40.         },
  41.         select1: {
  42.           title: '单选',
  43.           type: 'string',
  44.           enum: ['a', 'b', 'c'],
  45.           enumNames: ['早', '中', '晚'],
  46.         },
  47.       },
  48.     },
  49.     objectName3: {
  50.       title: '幽灵模式',
  51.       bind: 'obj',
  52.       description: '这是一个对象类型',
  53.       type: 'object',
  54.       collapsed: true,
  55.       theme: 'collapse:ghost',
  56.       properties: {
  57.         input1: {
  58.           title: '简单输入框',
  59.           type: 'string',
  60.           required: true,
  61.         },
  62.         select1: {
  63.           title: '单选',
  64.           type: 'string',
  65.           enum: ['a', 'b', 'c'],
  66.           enumNames: ['早', '中', '晚'],
  67.         },
  68.       },
  69.     },
  70.   },
  71. };
  73. const Demo = () => {
  74.   return <Form schema={schema} />;
  75. };
  77. export default Demo;
  1. 卡片模式： theme: 'card'
  1. import React from 'react';
  2. import Form from '../demo/display';
  4. const schema = {
  5.   type: 'object',
  6.   displayType: 'row',
  7.   properties: {
  8.     objectName: {
  9.       title: '卡片主题',
  10.       description: '这是一个对象类型',
  11.       type: 'object',
  12.       theme: 'card',
  13.       properties: {
  14.         input1: {
  15.           title: '简单输入框',
  16.           type: 'string',
  17.           required: true,
  18.           width: '30%',
  19.         },
  20.         select1: {
  21.           title: '单选',
  22.           type: 'string',
  23.           enum: ['a', 'b', 'c'],
  24.           enumNames: ['早', '中', '晚'],
  25.           width: '30%',
  26.         },
  27.         date: {
  28.           title: '时间选择',
  29.           type: 'string',
  30.           format: 'date',
  31.           width: '30%',
  32.         },
  33.       },
  34.     },
  35.     objectName2: {
  36.       title: '卡片主题',
  37.       description: '这是一个对象类型',
  38.       type: 'object',
  39.       theme: 'card',
  40.       properties: {
  41.         input1: {
  42.           title: '简单输入框',
  43.           type: 'string',
  44.           required: true,
  45.           width: '30%',
  46.         },
  47.         select1: {
  48.           title: '单选',
  49.           type: 'string',
  50.           enum: ['a', 'b', 'c'],
  51.           enumNames: ['早', '中', '晚'],
  52.           width: '30%',
  53.         },
  54.         date: {
  55.           title: '时间选择',
  56.           type: 'string',
  57.           format: 'date',
  58.           width: '30%',
  59.         },
  60.       },
  61.     },
  62.   },
  63. };
  65. const Demo = () => {
  66.   return (
  67.     <div>
  68.       <Form schema={schema} />
  69.     </div>
  70.   );
  71. };
  73. export default Demo;
  1. 平铺模式：theme: 'tile'
  1. import React from 'react';
  2. import Form from '../demo/display';
  4. const schema = {
  5.   type: 'object',
  6.   displayType: 'row',
  7.   properties: {
  8.     objectName: {
  9.       title: '平铺主题',
  10.       description: '这是一个对象类型',
  11.       type: 'object',
  12.       theme: 'tile',
  13.       properties: {
  14.         input1: {
  15.           title: '简单输入框',
  16.           type: 'string',
  17.           required: true,
  18.           width: '30%',
  19.         },
  20.         select1: {
  21.           title: '单选',
  22.           type: 'string',
  23.           enum: ['a', 'b', 'c'],
  24.           enumNames: ['早', '中', '晚'],
  25.           width: '30%',
  26.         },
  27.         date: {
  28.           title: '时间选择',
  29.           type: 'string',
  30.           format: 'date',
  31.           width: '30%',
  32.         },
  33.       },
  34.     },
  35.     objectName2: {
  36.       title: '平铺主题',
  37.       description: '这是一个对象类型',
  38.       type: 'object',
  39.       theme: 'tile',
  40.       properties: {
  41.         input1: {
  42.           title: '简单输入框',
  43.           type: 'string',
  44.           required: true,
  45.           width: '30%',
  46.         },
  47.         select1: {
  48.           title: '单选',
  49.           type: 'string',
  50.           enum: ['a', 'b', 'c'],
  51.           enumNames: ['早', '中', '晚'],
  52.           width: '30%',
  53.         },
  54.         date: {
  55.           title: '时间选择',
  56.           type: 'string',
  57.           format: 'date',
  58.           width: '30%',
  59.         },
  60.       },
  61.     },
  62.   },
  63. };
  65. const Demo = () => {
  66.   return (
  67.     <div>
  68.       <Form schema={schema} />
  69.     </div>
  70.   );
  71. };
  73. export default Demo;