mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-02 07:39:36 +08:00
882cec62d6
* docs: Add components overview page * fix detail * remove ContributorsList form overview page * fix components url * improve code style * remove extra file * fix detail * fix lint * fix lint * docs: Finish components overview page * fix lint * docs: Update cover * fix lint * update cover * update menu * improve overview page * refactor code * fix order * update title * add components count * fix overview page ssr bug * move less file * update title margin Co-authored-by: arvinxx <arvinx@foxmail.com>
2.7 KiB
2.7 KiB
| type | category | subtitle | title | cover |
|---|---|---|---|---|
| Feedback | Components | Drawer | https://gw.alipayobjects.com/zos/alicdn/7z8NJQhFb/Drawer.svg |
A panel which slides in from the edge of the screen.
When To Use
A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context.
- Use a Form to create or edit a set of information.
- Processing subtasks. When subtasks are too heavy for a Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
- When the same Form is needed in multiple places.
API
| Props | Description | Type | Default |
|---|---|---|---|
| closable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | boolean | true |
| destroyOnClose | Whether to unmount child components on closing drawer or not. | boolean | false |
| forceRender | Prerender Drawer component forcely | boolean | false |
| getContainer | Return the mounted node for Drawer. | HTMLElement | () => HTMLElement | Selectors | false |
'body' |
| mask | Whether to show mask or not. | Boolean | true |
| maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | boolean | true |
| maskStyle | Style for Drawer's mask element. | CSSProperties | {} |
| style | Style of wrapper element which contains mask compare to drawerStyle |
CSSProperties | - |
| drawerStyle | Style of the popup layer element | object | - |
| headerStyle | Style of the drawer header part | object | - |
| bodyStyle | Style of the drawer content part | object | - |
| title | The title for Drawer. | string|ReactNode | - |
| visible | Whether the Drawer dialog is visible or not. | boolean | false |
| width | Width of the Drawer dialog. | string|number | 256 |
| height | placement is top or bottom, height of the Drawer dialog. |
string|number | 256 |
| className | The class name of the container of the Drawer dialog. | string | - |
| zIndex | The z-index of the Drawer. |
Number | 1000 |
| placement | The placement of the Drawer. | top | right | bottom | left |
right |
| onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button. | function(e) | - |
| afterVisibleChange | Callback after the animation ends when switching drawers. | function(visible) | - |
| keyboard | Whether support press esc to close | Boolean | true |
| footer | The footer for Drawer. | ReactNode | - |
| footerStyle | Style of the drawer footer part. | CSSProperties | - |