当前位置: 首页 > Web前端 > HTML

schema-form是开发者的表单工具

时间:2023-03-28 11:10:27 HTML

schema-form是开发者的表单工具(基于AntDesignReact)基于AntDesignReact开发的适配组件,尽可能使用数据代替元素标签。安装npmi@dawdler/schema-form文档开发者文档+在线演示使用SchemaForm:type:row|自定义2布局方法importSchemaFormfrom'@dawdler/schema-form';/**row*//**自定义*/也可以单独使用的Element组件import{Element}from'@dawdler/schema-form';console.log(str)}/>参考SchemaFormtype:rowSchemaFormtype:customelementmode:'edit'|'读取'整体结构图图TBSchemaForm(SchemaForm)-->Element[Element适配层,根据类型匹配组件类型]SchemaForm-->CustomRender[CustomRender自定义渲染组件]Element作为element组件的适配层存在,也可以单独导入使用graphTBElement(ElementAdaptationlayer,supportedtype)-->type[type]type-->|text|Text[文本]类型-->|input|列表-包装|ListWrap[ListWrap]类型-->|other|Ant的类型推导见:```API:Element.type```API:SchemaFormWrapForm组件参数描述类型默认值类型设置布局样式行:使用Row包。自定义:直接渲染。rowcustomdisabled是否禁用,如果item有,则使用item作为结果boolean-options渲染列表IFormItem[]-外部传入的form:Form.useForm()FormInstance-initialValuesform.initialValues透传Record-API:SchemaForm.type=rowtype为row时的参数描述类型参数描述类型默认值gutternumber16spanRowspannumber6API:SchemaForm.options渲染列表,包裹Form.Item数组参数描述类型默认值disabled当前item内容是否禁用boolean-renderonly只有自定义类型才有渲染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元素组件类型枚举支持的类型描述(Ant的类型推导几乎都是小骆驼组件的大小写拼写:TimePicker.RangePicker->timeRangePicker)text只读文本。Aftersettingthewidth,itsupportssuperlonghiddeninputwrappingAnt'sInput,addingdefaultparameters.Fordetails,see:API:Inputlist-wraplistcomponent,whichcanbemodifiedtoread-onlyandeditablebymodeinput-groupInput.GrouptextareaInput.TextAreasearchInput.SearchpasswordInput.Passwordinput-numberInputNumberselectSelectdatepickerDatePicker(singledate)rangepickerDatePicker.RangePicker(timerange)timePicker(singledate)timeRangePickerTimePicker.RangePicker(时间区间)checkboxCheckboxcheckbox-groupCheckbox.Groupradio-groupRadio.GrouprateRatesliderSliderswitchSwitchuploadUploadavatarAvatarimageImagetagTagprogressProgresstree-selectTreeSelectcascaderCascader错误类型会抛出错误没有找到对应的type类型API:SchemaForm.options.typeSchemaForm组件的Item.type枚举支持的type描述类型DefaultvalueElement.typesupportsallElement.typetypesEnumElementType-groupwrapsItemasagroupstring-customcustomrenderingcomponent(props:ISchemaChildrenProps)=>React.ReactNode-graduallyperfectsingle-pagetest