Drawer is used to overlay content on top of the interface. They are intended to capture the user’s attention in order to inform or shift focus to a pertinent task.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Drawer.Content>
</Drawer>
</Box>
)
}
Properties
System props
System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.
Most drawers should have headers. The Drawer.Header subcomponent makes it easy to build a default header — simply supply a title prop and the Drawer Header will automatically render the title along with a close button.
If you need to build a custom header, you can do so by passing a children prop, which allows a developer to completely customize the header while maintaining the correct padding. You can use the Drawer.CloseButton subcomponent to render the close button manually.
Finally, a render prop can be supplied, which gives the developer full control of how the header will render. The function receives the context of the parent Drawer as an argument.
When making a custom header, a close icon button is still needed. The Drawer.CloseButton subcomponent makes it simple to include the standard close icon button in any drawer. The base component of Drawer.CloseButton is a standard Button and accepts the same props as that component.
The close button also accepts a children if you would like to render something other than the icon.
If you need custom on-close behavior or more flexibility in rendering, there is a render prop which receives the context of the parent Drawer as an argument.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
</Box>
</Drawer.Content>
</Drawer>
</Box>
)
}
Drawer sliding in from left
By default, the drawer component will slide in from the right side of the screen. Set the direction prop to left to change this behavior.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
