Drawer

The Drawer component is a container that slides in from side of the screen. It can be used to display additional content or actions that are not part of the main view.

The Drawer is a composition of several subcomponents:

• Drawer
  • DrawerCloseButton
  • DrawerPanel

Accessibility Guidelines

👉 The animation effect of this component is dependent on the prefers-reduced-motion media query.

Drawer

                                                
                                                const [isOpen, setOpen] = useState(false);
                                                
                                                <Drawer id="drawer-dialog-example" isOpen={isOpen} onClose={() => setOpen(false)}>
                                                  {/* Drawer Panel goes here */}
                                                </Drawer>;

Alignment

The Drawer component allows aligning the content panel horizontally to the left or right side of the screen using alignmentX prop. By default, the drawer content panel is aligned to the right.

                                                
                                                <Drawer id="drawer-dialog-example" isOpen={isOpen} onClose={() => setOpen(false)} alignmentX="left">
                                                  {/* Drawer Panel goes here */}
                                                </Drawer>

Close on Backdrop Click

By default, the drawer will close when the backdrop is clicked. You can disable this behavior by setting the closeOnBackdropClick prop to false.

                                                
                                                <Drawer id="drawer-dialog-example" isOpen={isOpen} onClose={() => setOpen(false)} closeOnBackdropClick={false}>
                                                  {/* Drawer content goes here */}
                                                </Drawer>

Close on Escape Key Down

By default, the drawer will close when the escape key is pressed. You can disable this behavior by setting the closeOnEscapeKeyDown prop to false.

                                                
                                                <Drawer id="drawer-dialog-example" isOpen={isOpen} onClose={() => setOpen(false)} closeOnEscapeKeyDown={false}>
                                                  {/* Drawer content goes here */}
                                                </Drawer>

API

The component further inherits properties from the <dialog> element.

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

DrawerCloseButton

The DrawerCloseButton component is a button that closes the drawer when clicked.

                                                
                                                <DrawerCloseButton />

Use color prop to change the color variant of the button. You can also change the size of the button using the size prop.

                                                
                                                <DrawerCloseButton color="secondary" size="large" />

Size of the icon can be changed via iconBoxSize prop. This prop accepts a number or an object with responsive values.

                                                
                                                <DrawerCloseButton iconBoxSize={20} />
                                                <DrawerCloseButton iconBoxSize={{ mobile: 20, tablet: 30, desktop: 40 }} />

API

The component further inherits properties from the <button> element.

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

DrawerPanel

The DrawerPanel component is a container for the content that will be displayed in the drawer.

                                                
                                                <DrawerPanel>{/* Drawer content goes here */}</DrawerPanel>

API

Full Example

                                                
                                                import React, { useState } from 'react';
                                                import { Button, Drawer, DrawerPanel, DrawerCloseButton } from '@alma-oss/spirit-web-react';
                                                
                                                export const Example = () => {
                                                  const [isOpen, setIsOpen] = useState(false);
                                                  const handleOpen = () => setIsOpen(true);
                                                  const handleClose = () => setIsOpen(false);
                                                
                                                  return (
                                                    <>
                                                      <Button onClick={handleOpen} aria-controls="drawer-example">
                                                        Open Drawer
                                                      </Button>
                                                
                                                      <Drawer id="drawer-example" isOpen={isOpen} onClose={handleClose}>
                                                        <DrawerPanel>
                                                          <DrawerCloseButton />
                                                          <div>Drawer content</div>
                                                        </DrawerPanel>
                                                      </Drawer>
                                                    </>
                                                  );
                                                };