schema-form
给开发者用的表单工具(基于 Ant Design React)
基于 Ant Design React 而开发的适配组件,尽量使用数据来替代元素标签。
安装
npm install -D @dawdler/schema-form
文档
开发者文档+在线 Demo
基于 Ant Design React 而开发的适配组件,尽量使用数据来替代元素标签。
更新日志
0.0.x: 基础版本
1.0.0: 将各组件独立抽离,type 类型统一为 antd 的小驼峰命名:TimePicker.RangePicker -> timeRangePicker)
使用
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',
},
]}
/>
整体结构图
graph TB
SchemaForm(SchemaForm) --> Element[Element适配层,根据type匹配组件类型]
SchemaForm --> CustomRender[Custom Render 自定义渲染组件]
默认布局:row
自定义布局: custom
API
SchemaForm 包裹 Form 的组件
参数 |
描述 |
类型 |
默认值 |
type |
设置布局样式。row:使用 Row 包裹。custom: 直接渲染。 |
boolean |
- |
disabled |
是否禁用,如果 item 有,以 item 的为结果 |
boolean |
- |
readOnly |
是否只读,如果 item 有,以 item 的为结果 |
boolean |
- |
options |
渲染列表 |
IFormItem[] |
- |
form |
外部传入的:Form.useForm()
|
FormInstance |
- |
initialValues |
form.initialValues 透传 |
Record<string, any> |
- |
SchemaForm.type=row 类型为 row 时的参数
参数 |
描述 |
类型 |
默认值 |
gutter |
Row 的 gutter |
number |
16 |
span |
Row 的 span |
number |
6 |
options 渲染列表,包裹 Form.Item 的数组
参数 |
描述 |
类型 |
默认值 |
disabled |
当前这一条 item 内容是否禁用 |
boolean |
- |
readOnly |
当前这一条 item 内容是否只读 |
boolean |
- |
render |
只有 custom 类型 才有的渲染 children 方法 |
(props: ISchemaChildrenProps) => React.ReactNode |
- |
fieldProps |
透传组件参数。 |
以 type 自动推动组件类型 |
- |
col |
type:row 类型时,col 的占位,如果 item 有。以 item 为结果 |
number |
- |
width |
铺满 item 宽度。默认:宽度 100%。auto: 使用默认组件宽度 |
string |
100% |
type |
联合类型,详见:API:options.type
|
IUnionType |
- |
other |
Ant 的 FormItemProps 参数 |
FormItemProps |
- |
options.type SchemaForm 组件的 Item.type 枚举
支持的 type |
描述 |
类型 |
默认值 |
Element.type |
支持所有的 Element.type 类型 |
EnumElementType |
- |
group |
将 Item 作为一个组包裹 |
string |
- |
custom |
自定义渲染组件 |
(props: ISchemaChildrenProps) => React.ReactNode |
- |
逐步完善的单元测试