Drawer

Info
Demos
Properties
Events

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>