Ant Design Pro DrawerForm 设置表单高度 100%

场景

DrawerForm从底部向上弹出，占据整个屏幕。

设置

关闭按钮

设置关闭按钮在右上角（默认左上角）。

drawerProps中设置closable: {placement: 'end'}。

底部弹出

设置Drawer从底部向上弹出。

drawerProps中设置placement: 'bottom'。

占据全屏

设置Drawer铺满整个浏览器页面。

drawerProps中设置height: '100%'。

关键

最关键的是DrawerForm生成的节点是div->form->div，会多一个form节点出来。

但控件没有属性可以设置form的CSS，所以只能在全局样式global.less中设置。（可以加rootClassName）

.ant-drawer-body .ant-form {
  height: 100%;
}

完整代码

<DrawerForm<TableListItem>
  key="review"
  title="Title"
  drawerProps={{
    destroyOnHidden: true,
    placement: 'bottom',
    height: '100%',
    closable: {placement: 'end'},
  }}
>
<div>表单内容</div>
</DrawerForm>