A panel which slides in from the edge of the screen.

API

• [ ] afterVisibleChange: Callback after the animation ends when switching drawers function(visible) -
• [x] bodyStyle: Style of the drawer content part object -
• [ ] closable: Whether a close (x) button is visible on top right of the Drawer dialog or not boolean true
• [ ] closeIcon: Custom close icon ReactNode <CloseOutlined />
• [ ] destroyOnClose: Whether to unmount child components on closing drawer or not boolean false
• [x] drawerStyle: Style of the popup layer element
• [x] footer: The footer for Drawer
• [x] footerStyle: Style of the drawer footer part CSSProperties -
• [ ] forceRender: Prerender Drawer component forcely boolean false
• [ ] getContainer: Return the mounted node for Drawer HTMLElement | () => HTMLElement | Selectors | false body
• [x] headerStyle: Style of the drawer header part object -
• [x] height: Placement is top or bottom, height of the Drawer dialog string | number 256
• [ ] keyboard: Whether support press esc to close boolean true
• [ ] 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 {}
• [x] placement: The placement of the Drawer top | right | bottom | left right
• [ ] push: Nested drawers push behavior boolean | { distance: string | number } { distance: 180 } 4.5.0+
• [x] title: The title for Drawer ReactNode -
• [x] visible: Whether the Drawer dialog is visible or not boolean false
• [x] width: Width of the Drawer dialog string | number 256
• [x] zIndex: The z-index of the Drawer number 1000
• [x] onClose: Specify a callback that will be called when a user clicks mask, close button or Cancel button function(e)

Example

<Drawer

title={{@title}}
vivisble={{@visible}}

/>

Properties

• onClose :event
• placement :string, values: ~w(top right bottom left), default: "right"
• drawerStyle :string
• headStyle :string
• footerStyle :string
• footer :string
• height :string
• visible :boolean
• title :string
• class :css_class
• bodyStyle :string, default: "foo: bar"
• style :string, default: "foo: bar"
• width :string, default: "800px"
• zIndex :integer, default: 1000