基于 antd封装的 formily表单组件库

布局组件

  1. FormLayout
    1. FormLayoutDeepContext
    2. FormLayoutShallowContext
  2. FormGrid 网格布局
    1. FormGrid.createFormGrid
  3. FormItem
    1. FormItem.BaseItem 需要依赖 FormItem 的样式布局
  4. FormButtonGroup 提交按钮
  5. Form
    1. FormProvider + FormLayout + form 标签的组合组件
  6. Space
  7. Submit
  8. Reset
  9. GridColumn
  1. [
  2.   "useFormDeepLayout",
  3.   "useFormGrid",
  4.   "useFormLayout",
  5.   "useFormShallowLayout",
  6.   "useGridColumn",
  7.   "useGridSpan"
  8. ]

FormButtonGroup 按钮组容器

  • FormButtonGroup.FormItem 按钮组与主表单 FormItem 对齐表单
  • FormButtonGroup.Sticky 按钮组浮动定位
  • FormButtonGroup 处理按钮组间隙

FormItem 对齐表单
image.png

Sticky 固定在网页底部
image.png

  1. <FormButtonGroup.Sticky align="center">
  2.   <FormButtonGroup>
  3.     <Submit onSubmit={console.log}>提交</Submit>
  4.     <Reset>重置</Reset>
  5.   </FormButtonGroup>
  6. </FormButtonGroup.Sticky>
  8. <FormButtonGroup.FormItem>
  9.   <Submit onSubmit={console.log}>提交</Submit>
  10.   <Reset>重置</Reset>
  11. </FormButtonGroup.FormItem>

Schema 布局组件

  1. {
  2.   "form": {
  3.     "labelCol": 6,
  4.     "wrapperCol": 12
  5.   },
  6.   "schema": {
  7.     "type": "object",
  8.     "properties": {
  9.       "Card": {
  10.         "type": "void",
  11.         "x-component": "Card",
  12.         "x-component-props": {
  13.           "title": "Title"
  14.         },
  15.         "x-designable-id": "t314h0wlzod",
  16.         "x-index": 0,
  17.         "name": "Card"
  18.       },
  19.       "FormGrid": {
  20.         "type": "void",
  21.         "x-component": "FormGrid",
  22.         "x-validator": [],
  23.         "x-component-props": {},
  24.         "x-designable-id": "qj9hsdlvqba",
  25.         "x-index": 1,
  26.         "name": "FormGrid",
  27.         "properties": {
  28.           "a787t95qcjs": {
  29.             "type": "void",
  30.             "x-component": "FormGrid.GridColumn",
  31.             "x-designable-id": "a787t95qcjs",
  32.             "x-index": 0,
  33.             "x-validator": [],
  34.             "x-component-props": {}
  35.           },
  36.           "6kl7ga0rcnq": {
  37.             "type": "void",
  38.             "x-component": "FormGrid.GridColumn",
  39.             "x-designable-id": "6kl7ga0rcnq",
  40.             "x-index": 1,
  41.             "x-validator": [],
  42.             "x-component-props": {}
  43.           },
  44.           "u6ro1e35o80": {
  45.             "type": "void",
  46.             "x-component": "FormGrid.GridColumn",
  47.             "x-designable-id": "u6ro1e35o80",
  48.             "x-index": 2
  49.           }
  50.         }
  51.       },
  52.       "FormTab": {
  53.         "type": "void",
  54.         "x-component": "FormTab",
  55.         "x-component-props": {},
  56.         "x-designable-id": "8c2mnbk6hiq",
  57.         "x-index": 2,
  58.         "name": "FormTab"
  59.       },
  60.       "FormLayout": {
  61.         "type": "void",
  62.         "x-component": "FormLayout",
  63.         "x-component-props": {},
  64.         "x-designable-id": "gfgbyrhi79d",
  65.         "x-index": 3,
  66.         "name": "FormLayout"
  67.       },
  68.       "FormCollapse": {
  69.         "type": "void",
  70.         "x-component": "FormCollapse",
  71.         "x-component-props": {},
  72.         "x-designable-id": "u5u4qceqlaf",
  73.         "x-index": 4,
  74.         "name": "FormCollapse"
  75.       },
  76.       "Space": {
  77.         "type": "void",
  78.         "x-component": "Space",
  79.         "x-component-props": {},
  80.         "x-designable-id": "07n7b4hci88",
  81.         "x-index": 5,
  82.         "name": "Space"
  83.       },
  84.       "ArrayCards": {
  85.         "type": "array",
  86.         "x-decorator": "FormItem",
  87.         "x-component": "ArrayCards",
  88.         "x-component-props": {
  89.           "title": "Title"
  90.         },
  91.         "x-validator": [],
  92.         "x-decorator-props": {},
  93.         "x-designable-id": "r2w52bn19xd",
  94.         "x-index": 6,
  95.         "name": "ArrayCards"
  96.       },
  97.       "ArrayTable": {
  98.         "type": "array",
  99.         "x-decorator": "FormItem",
  100.         "x-component": "ArrayTable",
  101.         "x-validator": [],
  102.         "x-component-props": {},
  103.         "x-decorator-props": {},
  104.         "x-designable-id": "pe6gw36zheg",
  105.         "x-index": 7,
  106.         "name": "ArrayTable"
  107.       }
  108.     },
  109.     "x-designable-id": "zrpvzy8mza3"
  110.   }
  111. }

image.png

输入组件

  1. Input
  2. Password
  3. Select
  4. TreeSelect
  5. DatePicker
  6. TimePicker
  7. NumberPicker
  8. Transfer
  9. Cascader
  10. Radio
  11. Checkbox
  12. Upload
  13. Switch
  14. SelectTable

场景组件

  1. ArrayBase
  2. ArrayCards 卡片里面的表单
  3. ArrayItems
  4. ArrayTable
  5. SelectTable
  6. ArrayTabs 选项卡
  7. ArrayCollapse 手风琴表单
  8. FormCollapse
  9. FormStep 分步表单
  10. FormTab 选项卡表单
  11. FormDialog
  12. FormDrawer
  13. Editable

只支持 Schema模式

ArrayCards/ArrayTable/FormStep 这类组件只支持 Schema 模式，不支持纯 JSX 模式

  • JSONSchema 可以做到场景化抽象
  • JSX 模式，受限于 JSX 的不可解析性，很难做到 UI 级别的场景化抽象

ArrayItems

image.png

ArrayTable

image.png

SelectTable

image.png

Editable

image.png

阅读态组件

PreviewText

PreviewText