Drawer 抽屉

屏幕边缘滑出的浮层面板。

何时使用

抽屉从父窗体边缘滑入,覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务,操作完成后,可以平滑地回到到原任务。

  • 当需要一个附加的面板来控制父窗体内容,这个面板在需要时呼出。比如,控制界面展示样式,往界面中添加内容。

  • 当需要在当前任务流中插入临时任务,创建或预览附加内容。比如展示协议条款,创建子对象。

基本

第一个抽屉

自定义位置

自定义位置,点击触发按钮抽屉从相应的位置滑出,点击遮罩区关闭

Render in this
Basic Drawer

Some contents...

渲染到当前 DOM 上

渲染在当前 dom 里。自定义容器,查看 getContainer。

抽屉表单

在抽屉中使用表单。

多层抽屉

多层抽屉,在抽屉内打开新的抽屉,用以解决多分支任务的复杂状况。

API

参数说明类型默认值
closable是否显示右上角的关闭按钮booleantrue
destroyOnClose关闭时销毁 Drawer 里的子元素booleanfalse
forceRender预渲染 Drawer 内元素booleanfalse
getContainer指定 Drawer 挂载的 HTML 节点, false 为挂载在当前 domHTMLElement | () => HTMLElement | Selectors | false'body'
maskClosable点击蒙层是否允许关闭booleantrue
mask是否展示遮罩booleantrue
maskStyle遮罩样式CSSProperties{}
style可用于设置 Drawer 最外层容器的样式,和 drawerStyle 的区别是作用节点包括 maskCSSProperties-
drawerStyle用于设置 Drawer 弹出层的样式CSSProperties-
headerStyle用于设置 Drawer 头部的样式CSSProperties-
bodyStyle可用于设置 Drawer 内容部分的样式CSSProperties-
title标题string | ReactNode-
visibleDrawer 是否可见boolean-
width宽度string | number256
height高度, 在 placementtopbottom 时使用string | number256
className对话框外层容器的类名string-
zIndex设置 Drawer 的 z-indexnumber1000
placement抽屉的方向top | right | bottom | leftright
onClose点击遮罩层或右上角叉或取消按钮的回调function(e)-
afterVisibleChange切换抽屉时动画结束后的回调function(visible)-
keyboard是否支持键盘 esc 关闭booleantrue
footer抽屉的页脚ReactNode-
footerStyle抽屉页脚部件的样式CSSProperties-