Floating Forms

ModalForm and DrawerForm are a variant of ProForm, which is still a form in essence. So you can't customize the footer with footer, if you want to define the footer you need to use submitter.render to customize it. These two forms behave like ProForm and can be modified directly from ProForm.

ModalForm and DrawerForm both provide triggers to reduce state usage, if you need to use state control you can use visible and onVisibleChange to control opening and closing.

Drawer Forms

Nested Drawer Forms

Custom Modal Forms' Button

Use visible and onVisibleChange

Reset Form

API

ModalForm

ModalForm combines Modal and ProForm to reduce tedious state management.

ParametersDescriptionTypeDefault
triggerThe dom used to trigger the Modal to open, usually the buttonReactNode-
visiblewhether to openboolean-
onVisibleChangetrigger when visible changes(visible:boolean)=>void-
modalPropsModal's props, used in the same way as antd. Note: 'visible' is not supported, please use the global visibleprops-
titleThe title of the popup boxReactNode-
widththe width of the popup boxNumber-
onFinishTriggered when submitting data, if returns a true, will close the popup and reset the formasync (values)=>boolean-

DrawerForm

DrawerForm combines Drawer and ProForm to reduce tedious state management.

ParametersDescriptionTypeDefault
triggerThe dom used to trigger the opening of the Modal, typically the buttonReactNode-
visiblewhether to openboolean-
onVisibleChangetrigger when visible changes(visible:boolean)=>void-
drawerPropsDrawer's props, used in the same way as antd. Note: 'visible' is not supported, please use the global visibleprops-
titleThe title of the drawerReactNode-
widthwidth of the drawerNumber-
onFinishTriggered when data is submitted. If a true is returned, it will close the drawer and reset the formasync (values)=>boolean-