Welcome to the StepOne components documentation
StepOne Fundation
StepOne Modules
Drawer
The Drawer component is a panel that slides in from the edge of the screen which helps the user access additional information without crowding the main display.
Drawer Props
| Name | Use | Type | Definition |
| open | required | boolean | Determines whether the drawer should be open or not. |
| parentRef | optional | any | Reference for parent element and renders the drawer in absolute position on parent with overlay. |
| className | optional | string | Adds a class to the drawer. |
| renderAsPortal | optional | boolean | Sets the drawer as a portal with overlay. |
| position | optional | 'left' | 'right' | Specifies the position of the drawer relative to the parent element. |
| onClose | optional | () => void | Handler function for the close button. |
| onBack | optional | () => void | Handler function for the back button. |
Examples
Drawer with back button
To indicate the user has reached a second navigation level through the drawer. This enables the user to go to the previous level if they click.
Drawer title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio aperiam libero hic dolorum veritatis, necessitatibus, neque suscipit autem nostrum repellat corporis nihil, a saepe est. Autem beatae sunt debitis quasi!
Drawer with close button
Close button appears when the user has not gone to any navigation level, allowing the drawer to be closed if pressed. Clicking outside the area on the overlay drawer would also close it.
Drawer title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio aperiam libero hic dolorum veritatis, necessitatibus, neque suscipit autem nostrum repellat corporis nihil, a saepe est. Autem beatae sunt debitis quasi!