| Name | Description | Default | Type |
|---|---|---|---|
open* | If true, the Drawer will be visible. | false | boolean |
as | HTML tag or React Component to render the component as. | | ElementType<any> |
children | Content of the Drawer. | | ReactNode |
className | Additional CSS classes. | | string |
forwardedAs | HTML tag or React Component to finally render the component as. | | ElementType<any> |
nullWhenClosed | If true, removes the component from the real DOM when closed. For full virtual DOM unmount(if necessary), perform at a parent level. | false | boolean |
onAfterClose | | () => void | |
onAfterOpen | | () => void | |
onBeforeClose | | () => void | |
onBeforeOpen | | () => void | |
onOuterClick | | () => void | |
placement | Used to determine which side of the viewport the Drawer should open from. | "right" | 'left' |'top' |'bottom' |'right' |
position | The position of the Drawer. | "absolute" | 'fixed' |'absolute' |
shadow | Determines whether a drop shadow should be visible along the edge of the Drawer for contrast purposes. | false | boolean |
size | The width or height that the Drawer will open to, depending on its placement. | "100%" | string |
transitionSpeed | Determines the speed of the transition. This value comes from | "0.25s" | string |
Drawer
core package3.2.2
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
The Drawer component is capable of showing and hiding its content with or without animation. When the Drawer opens, it will open on top of any other content. If you would like the Drawer to push and pull content on the page rather than open on top of it, consider using the ExpandCollapse component instead.
Usage
The Drawer component can be anchored on any of the four edge boundaries (top, right, bottom, left) by setting the placement prop. Declare a size for the Drawer in order to set how far out the Drawer will open to. Drawers will always expand to 100% of the height (when using left or right) or width (when using top or bottom) of the viewport or containing element.
You can control how quickly the Drawer opens and closes by by passing a CSS time value to transitionSpeed, which is a string containing any positive number directly followed by 's' or 'ms'. If you would like no transition, pass 0 the to transitionSpeed prop.
If you would like to close a Drawer on any user click outside of the Drawer content, use the onOuterClick callback function. Additional callback functions are provided to allow for event handling before and after the Drawer opens and closes.
Contained Drawer
When a Drawer position is set to fixed, it will fill the entire edge of the viewport that is set by the placement prop. However, by setting the position prop to absolute, you can place the Drawer within a containing element. The Drawer will then be bound by that container.
When using a contained Drawer, make sure the direct parent element to the Drawer has style settings position: relative and overflow: hidden. This ensures that when the Drawer is closed, it will not be visible outside of the bounds of that parent element.