likes
comments
collection
share

schema-form给开发者用的表单工具

作者站长头像
站长
· 阅读数 23

schema-form

给开发者用的表单工具(基于 Ant Design React)

基于 Ant Design React 而开发的适配组件,尽量使用数据来替代元素标签。

安装

npm i @dawdler/schema-form

文档

开发者文档+在线 Demo

使用

SchemaForm:type:row | custom 2 种布局方式
import SchemaForm from '@dawdler/schema-form';

/** row */
<SchemaForm
  type="row"
  gutter={16}
  span={12}
  options={[
    {
      label: '输入框',
      type: 'input',
    },
  ]}
/>

/** custom */
<SchemaForm
  type="custom"
  options={[
    {
      label: '输入框',
      type: 'input',
    },
  ]}
/>
也可以单独使用的元素组件
import { Element } from '@dawdler/schema-form';

<Element type="input" value="123" onChange={(str) => console.log(str)} />

参考

SchemaForm type:row

schema-form给开发者用的表单工具

SchemaForm type:custom

schema-form给开发者用的表单工具

element mode: 'edit' | 'read'

schema-form给开发者用的表单工具

整体结构图

graph TB

    SchemaForm(SchemaForm) --> Element[Element适配层,根据type匹配组件类型]
    SchemaForm --> CustomRender[Custom Render 自定义渲染组件]

Element 作为元素组件的适配层而存在,也可以单独引入使用

graph TB
    Element(Element适配层,支持的类型) --> type[type]
    type --> |text| Text[Text]
    type --> |input| InputWrap[InputWrap:增加了Input的过滤空格功能]
    type --> |list-wrap| ListWrap[ListWrap]
    type --> |other| Ant的类型推导,详见:```API:Element.type```

API:SchemaForm 包裹 Form 的组件

参数描述类型默认值
type设置布局样式。row:使用 Row 包裹。custom: 直接渲染。rowcustom
disabled是否禁用,如果 item 有,以 item 的为结果boolean-
options渲染列表IFormItem[]-
form外部传入的:Form.useForm()FormInstance-
initialValuesform.initialValues 透传Record<string, any>-

API: SchemaForm.type=row 类型为 row 时的参数

参数描述类型默认值
gutterRow 的 gutternumber16
spanRow 的 spannumber6

API: SchemaForm.options 渲染列表,包裹 Form.Item 的数组

参数描述类型默认值
disabled当前这一条 item 内容是否禁用boolean-
render只有 custom 类型 才有的渲染 children 方法(props: ISchemaChildrenProps) => React.ReactNode-
fieldProps透传组件参数。以 type 自动推动组件类型-
coltype:row类型时,col 的占位,如果 item 有。以 item 为结果number-
width铺满 item 宽度。默认:宽度 100%。auto: 使用默认组件宽度string-
type联合类型,详见:API:SchemaForm.options.typeIUnionType-
otherAnt 的 FormItemProps 参数FormItemProps-

API:Element.type Element 组件的 type 枚举

支持的 type描述(Ant 的类型推导几乎都是组件的小驼峰拼写:TimePicker.RangePicker -> timeRangePicker)
text只读文本。设置宽度之后支持超长隐藏
input包裹 Ant 的 Input,增加了默认参数。详见: API:Input
list-wrap列表组件,通过 mode 可以修改为只读、编辑状态
input-groupInput.Group
textareaInput.TextArea
searchInput.Search
passwordInput.Password
input-numberInputNumber
selectSelect
datepickerDatePicker(单个日期)
rangepickerDatePicker.RangePicker(日期区间)
timePickerTimePicker(单个时间)
timeRangePickerTimePicker.RangePicker(时间区间)
checkboxCheckbox
checkbox-groupCheckbox.Group
radio-groupRadio.Group
rateRate
sliderSlider
switchSwitch
uploadUpload
avatarAvatar
imageImage
tagTag
progressProgress
tree-selectTreeSelect
cascaderCascader
错误类型会抛出错误没有找到对应的 type 类型

API:SchemaForm.options.type SchemaForm 组件的 Item.type 枚举

支持的 type描述类型默认值
Element.type支持所有的 Element.type 类型EnumElementType-
group将 Item 作为一个组包裹string-
custom自定义渲染组件(props: ISchemaChildrenProps) => React.ReactNode-

逐步完善的单页测试

schema-form给开发者用的表单工具