Drawer
Drawer is a component for a panel that appears from the edge of the screen.
Import
import {Drawer,DrawerOverlay,DrawerCloseButton,DrawerHeader,DrawerBody,DrawerFooter,} from "@yamada-ui/react"
Drawer: A wrapper component that controls the state of the panel.DrawerOverlay: A component for the overlay behind the panel.DrawerCloseButton: A component for the button that closes the panel.DrawerHeader: A component that displays the header of the panel.DrawerBody: A component that displays the main content of the panel.DrawerFooter: A component that displays the footer of the panel.
DrawerOverlay and DrawerCloseButton can be omitted.
Usage
To control the visibility, set isOpen and onClose.
Drawer internally uses Modal.
Editable example
const { isOpen, onOpen, onClose } = useDisclosure() return ( <> <Button onClick={onOpen}>Open Drawer</Button> <Drawer isOpen={isOpen} onClose={onClose}> <DrawerHeader>ドラゴンボール</DrawerHeader> <DrawerBody> 『ドラゴンボール』は、鳥山明による日本の漫画作品です。... </DrawerBody> <DrawerFooter> <Button variant="ghost" onClick={onClose}> とじる </Button> <Button colorScheme="primary">Wikipedia</Button> </DrawerFooter> </Drawer> </> )
Change Size
Editable example
const sizeMap = ["xs", "sm", "md", "lg", "xl", "full"] const [size, setSize] = useState("md") const { isOpen, onOpen, onClose } = useDisclosure() return ( <> <Wrap gap="md"> {sizeMap.map((size) => ( <Button key={size} onClick={() => { setSize(size) onOpen() }} > Open {size} Drawer </Button> ))} </Wrap> <Drawer isOpen={isOpen} onClose={onClose} size={size}> <DrawerHeader>ドラゴンボール</DrawerHeader> <DrawerBody> 『ドラゴンボール』は、鳥山明による日本の漫画作品です。... </DrawerBody> <DrawerFooter> <Button variant="ghost" onClick={onClose}> とじる </Button> <Button colorScheme="primary">Wikipedia</Button> </DrawerFooter> </Drawer> </> )
Change Position
To change the display position, set placement to values like top or left-start. By default, right is set.
Editable example
const placementMap = ["top", "right", "bottom", "left"] const [placement, setPlacement] = useState("center") const { isOpen, onOpen, onClose } = useDisclosure() return ( <> <Wrap gap="md"> {placementMap.map((placement) => ( <Button key={placement} onClick={() => { setPlacement(placement) onOpen() }} > Open {placement} Drawer </Button> ))} </Wrap> <Drawer isOpen={isOpen} onClose={onClose} placement={placement}> <DrawerHeader>ドラゴンボール</DrawerHeader> <DrawerBody> 『ドラゴンボール』は、鳥山明による日本の漫画作品です。... </DrawerBody> <DrawerFooter> <Button variant="ghost" onClick={onClose}> とじる </Button> <Button colorScheme="primary">Wikipedia</Button> </DrawerFooter> </Drawer> </> )
Change Duration
To change the duration, set duration to a numerical value (seconds).
Editable example
const { isOpen, onOpen, onClose } = useDisclosure() return ( <> <Button onClick={onOpen}>Open Drawer</Button> <Drawer isOpen={isOpen} onClose={onClose} duration={0.7}> <DrawerHeader>ドラゴンボール</DrawerHeader> <DrawerBody> 『ドラゴンボール』は、鳥山明による日本の漫画作品です。... </DrawerBody> <DrawerFooter> <Button variant="ghost" onClick={onClose}> とじる </Button> <Button colorScheme="primary">Wikipedia</Button> </DrawerFooter> </Drawer> </> )
Fit to Screen Height
If you want the panel to fit the height of the screen, set isFullHeight to true.
Editable example
const { isOpen, onOpen, onClose } = useDisclosure() return ( <> <Button onClick={onOpen}>Open Drawer</Button> <Drawer isOpen={isOpen} onClose={onClose} placement="bottom" isFullHeight> <DrawerHeader>ドラゴンボール</DrawerHeader> <DrawerBody> 『ドラゴンボール』は、鳥山明による日本の漫画作品です。... </DrawerBody> <DrawerFooter> <Button variant="ghost" onClick={onClose}> とじる </Button> <Button colorScheme="primary">Wikipedia</Button> </DrawerFooter> </Drawer> </> )
Do Not Block Scroll on Mount
By default, scrolling of the main content is blocked when the panel is opened to ensure accessibility. If you do not want to block the scroll of the main content, set blockScrollOnMount to false.
Editable example
const { isOpen, onOpen, onClose } = useDisclosure() return ( <> <Button onClick={onOpen}>Open Drawer</Button> <Drawer isOpen={isOpen} onClose={onClose} blockScrollOnMount={false}> <DrawerHeader>ドラゴンボール</DrawerHeader> <DrawerBody> 『ドラゴンボール』は、鳥山明による日本の漫画作品です。... </DrawerBody> <DrawerFooter> <Button variant="ghost" onClick={onClose}> とじる </Button> <Button colorScheme="primary">Wikipedia</Button> </DrawerFooter> </Drawer> </> )
Customize the Close Button
If you want to customize the DrawerCloseButton by passing props, etc., set it without omitting.
Editable example
const { isOpen, onOpen, onClose } = useDisclosure() return ( <> <Button onClick={onOpen}>Open Drawer</Button> <Drawer isOpen={isOpen} onClose={onClose}> <DrawerCloseButton color="red.500" /> <DrawerHeader>ドラゴンボール</DrawerHeader> <DrawerBody> 『ドラゴンボール』は、鳥山明による日本の漫画作品です。... </DrawerBody> <DrawerFooter> <Button variant="ghost" onClick={onClose}> とじる </Button> <Button colorScheme="primary">Wikipedia</Button> </DrawerFooter> </Drawer> </> )
Disable the Close Button
If onClose is not set, the close button will be disabled (hidden).
By default, clicking on the overlay will close the modal. Please note that if onClose is not set, clicking on the overlay to close will also be disabled.
Editable example
const { isOpen, onOpen, onClose } = useDisclosure() return ( <> <Button onClick={onOpen}>Open Drawer</Button> <Drawer isOpen={isOpen}> <DrawerHeader>ドラゴンボール</DrawerHeader> <DrawerBody> 『ドラゴンボール』は、鳥山明による日本の漫画作品です。... </DrawerBody> <DrawerFooter> <Button variant="ghost" onClick={onClose}> とじる </Button> <Button colorScheme="primary">Wikipedia</Button> </DrawerFooter> </Drawer> </> )
Close on drag
If you want to close the Drawer on drag, set closeOnDrag to true.
Editable example
const placementMap = ["top", "right", "bottom", "left"] const [placement, setPlacement] = useState("center") const { isOpen, onOpen, onClose } = useDisclosure() return ( <> <Wrap gap="md"> {placementMap.map((placement) => ( <Button key={placement} onClick={() => { setPlacement(placement) onOpen() }} > Open {placement} Drawer </Button> ))} </Wrap> <Drawer closeOnDrag isOpen={isOpen} onClose={onClose} placement={placement}> <DrawerHeader>ドラゴンボール</DrawerHeader> <DrawerBody> 『ドラゴンボール』は、鳥山明による日本の漫画作品です。... </DrawerBody> <DrawerFooter> <Button variant="ghost" onClick={onClose}> とじる </Button> <Button colorScheme="primary">Wikipedia</Button> </DrawerFooter> </Drawer> </> )
Hide the Drag Bar
To hide the drag bar, set withDragBar to false.
Editable example
const { isOpen, onOpen, onClose } = useDisclosure() return ( <> <Button onClick={onOpen}>Open Drawer</Button> <Drawer isOpen={isOpen} onClose={onClose} closeOnDrag withDragBar={false} withCloseButton > <DrawerHeader>ドラゴンボール</DrawerHeader> <DrawerBody> 『ドラゴンボール』は、鳥山明による日本の漫画作品です。... </DrawerBody> <DrawerFooter> <Button variant="ghost" onClick={onClose}> とじる </Button> <Button colorScheme="primary">Wikipedia</Button> </DrawerFooter> </Drawer> </> )
Customize the Overlay
If you want to customize the DrawerOverlay by passing props, etc., set it without omitting.
Editable example
const { isOpen, onOpen, onClose } = useDisclosure() return ( <> <Button onClick={onOpen}>Open Drawer</Button> <Drawer isOpen={isOpen} onClose={onClose}> <DrawerOverlay bg="blackAlpha.300" backdropFilter="blur(10px)" /> <DrawerHeader>ドラゴンボール</DrawerHeader> <DrawerBody> 『ドラゴンボール』は、鳥山明による日本の漫画作品です。... </DrawerBody> <DrawerFooter> <Button variant="ghost" onClick={onClose}> とじる </Button> <Button colorScheme="primary">Wikipedia</Button> </DrawerFooter> </Drawer> </> )
Disable the Overlay
To disable (hide) the overlay of the panel, set withOverlay to false.
Editable example
const { isOpen, onOpen, onClose } = useDisclosure() return ( <> <Button onClick={onOpen}>Open Drawer</Button> <Drawer isOpen={isOpen} onClose={onClose} withOverlay={false}> <DrawerHeader>ドラゴンボール</DrawerHeader> <DrawerBody> 『ドラゴンボール』は、鳥山明による日本の漫画作品です。... </DrawerBody> <DrawerFooter> <Button variant="ghost" onClick={onClose}> とじる </Button> <Button colorScheme="primary">Wikipedia</Button> </DrawerFooter> </Drawer> </> )
Edit this page on GitHub