Drawer

Description

The Drawer component is a Modal variation that appears as a side panel at any chosen side of the page; top, bottom, left or right (default right). A Drawer is typically used to show additional information. It can also be used to have easy/quick tasks while being in context.

Parts in Drawer

To provide custom content to parts of the Drawer, a set of component parts are provided:

  • <Drawer.Navigation>: The navigation field at the top of the component, default with a close button (Equal to the prop navContent).
  • <Drawer.Header>: The header field of the component, where the title will appear (Equal to the prop headerContent).
  • <Drawer.Body>: The body of the Drawer, provided with a section background color, default black-3 (Equal to the prop modalContent).

More detailed information

For more details regarding the component functionality, check out the Modal documentation.

Converting from Modal mode drawer

If you are converting from <Modal mode="drawer" /> to <Drawer />, there are a few differences you need to take into consideration:

  • All trigger_* props are not supported for Drawer, use triggerAttributes instead to pass in props for the trigger button.
    • Change prop trigger_hidden to omitTriggerButton to omit the default trigger button from Modal.
  • Only camelCase props are supported for Drawer, so you will need to update the prop names.
  • Modal.Inner/Modal.Content converts to Drawer.Body.
  • Modal.Bar converts to Drawer.Navigaton.
  • Modal was a class component and Drawer is a functional component.

Demos

Basic Drawer

<Drawer
title="Drawer title"
triggerAttributes={{text: "Open drawer"}}
>
<P top>
Some informational content
</P>
<P top>
Elementum eu suspendisse sit platea elit porttitor magna
laoreet ad ultrices tempus urna curae parturient conubia
quisque viverra eget vestibulum neque pulvinar semper
vulputate id dis varius pellentesque nunc egestas risus amet
mus aptent luctus imperdiet netus natoque cubilia mattis
nostra proin ornare scelerisque sodales faucibus placerat sem
bibendum pretium rutrum vitae sociis ligula inceptos morbi
quam mi sed pharetra fermentum tortor ullamcorper ipsum
tellus eros euismod volutpat nisl dui lectus fames suscipit
phasellus praesent justo mollis montes velit taciti gravida
</P>
</Drawer>

Drawer with custom content

<Drawer
title="Custom title"
>
<Drawer.Navigation>
<Breadcrumb onClick={handleBack} />
</Drawer.Navigation>
<Drawer.Header>
<P bottom>This is a lorem ipsum dolor</P>
<Button bottom size="large">
Lorem ipsum
</Button>
<Button bottom size="large" variant="secondary">
Dolor sit
</Button>
<FormStatus state="info">This is a lorem ipsum dolor</FormStatus>
<Tabs
id="unique-linked-id"
data={[
{
title: 'One',
key: 'one',
},
{
title: 'Two',
key: 'two',
},
]}
/>
</Drawer.Header>
<Drawer.Body>
<Tabs.Content id="unique-linked-id">
{({ title }) => {
return (
<>
<H2>{title}</H2>
<P top>This is a left aligned Drawer content.</P>
<P top>
Elementum eu suspendisse sit platea elit porttitor magna
laoreet ad ultrices tempus urna curae parturient conubia
quisque viverra eget vestibulum neque pulvinar semper
vulputate id dis varius pellentesque nunc egestas risus amet
mus aptent luctus imperdiet netus natoque cubilia mattis
nostra proin ornare scelerisque sodales faucibus placerat sem
bibendum pretium rutrum vitae sociis ligula inceptos morbi
quam mi sed pharetra fermentum tortor ullamcorper ipsum
tellus eros euismod volutpat nisl dui lectus fames suscipit
phasellus praesent justo mollis montes velit taciti gravida
lacus commodo senectus feugiat lorem etiam consequat
penatibus cum hendrerit accumsan orci potenti purus nulla
interdum metus sollicitudin magnis libero sapien habitant non
class ridiculus consectetur congue nec litora sociosqu
aliquet felis in rhoncus nascetur odio ultricies nullam a
iaculis massa nisi ante nam cras aenean erat facilisi vivamus
ut cursus auctor arcu lobortis himenaeos dictum habitasse
tristique mauris at blandit sagittis nibh dignissim
condimentum per integer duis lacinia malesuada est adipiscing
maecenas donec eleifend turpis dictumst dapibus tempor fusce
aliquam torquent hac ac curabitur venenatis et tincidunt
augue porta vehicula enim facilisis posuere primis molestie
convallis diam vel fringilla dolor leo quis diam cursus massa
sapien tristique cum senectus sed tortor natoque amet
hendrerit ut fusce ipsum quis
</P>
</>
)
}}
</Tabs.Content>
</Drawer.Body>
</Drawer>

Customize trigger button

<Drawer
title="Drawer with custom trigger"
triggerAttributes={{
text: "Custom trigger",
variant: "primary",
size: "large",
icon: "loupe",
icon_position: "left"
}}
>
<Drawer.Body spacing>
<P>
Opened a Drawer with a custom trigger button!
</P>
</Drawer.Body>
</Drawer>

Close Drawer by callback method

<Drawer
title="Drawer title"
triggerAttributes={{text: "Open drawer"}}
hideCloseButton
>
{({ close }) => (
<>
<Button text="Close by callback" on_click={close} />
</>
)}
</Drawer>

Remove animation and spacing

<Drawer
title="No spacing or animation"
noAnimation
spacing={false}
hideCloseButton
>
<Drawer.Body>
<P top bottom>This is a lorem ipsum dolor</P>
<Button bottom size="large">
Lorem ipsum
</Button>
<Button bottom size="large" variant="secondary">
Dolor sit
</Button>
<FormStatus state="info">This is a lorem ipsum dolor</FormStatus>
</Drawer.Body>
</Drawer>