Drawer

The Drawer component is capable of showing and hiding its content with or without animation. When a 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 Expand Collapse component instead.

A Drawer 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.

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.

Note: 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.

If you would like to close a Drawer on any user click outside of the Drawer content, use the onOuterClick function prop.

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.