React | Drawer | Made with Supernova

React

Is new design vision part implemented using new tokens?

Up to date

Storybook

React guidance

Source

GitHub code


                                                        
                                                        
                                                            import { Button, Drawer } from '@optimus-web/core';
                                                        
                                                        export const MyDrawerComponent = () => {
                                                            const [open, setOpen] = useState(false);
                                                        
                                                            return (
                                                                <>
                                                                    <Button onClick={() => setOpen(true)}>Click me</Button>
                                                                    <Drawer open={open} onClose={() => setOpen(false)} dragBarLabel="Drag to close">
                                                                        Drawer content
                                                                    </Drawer>
                                                                </>
                                                            );
                                                        };

Name	Description	Type	Default
children?	Defines the children	ReactNode	undefined
height?	Defines the default height	${number}%	'80%'
open	Enables the opening of drawer	boolean	undefined
onClose?	Handles the closing of the drawer	() => void	-
dragBarLabel?	Defines the area label for the drag bar that closes the drawer	string	undefined
portalContainerId?	Defines the container id for the portal wrapper	string	undefined
closeHandler?	Defines the close handler variant	CloseHandlerVariant	'drag'

Drawer

Resources

Example

API