Drawer

Drawers are simply containers for content. They are used to present content on top of other content so that the user maintains a sense of the original context.

Props

children

Node

className

String

disableOverlayClose

Bool

false

footer

Node

header

Node

isVisible

Bool

false

onClose

Func

required

Examples

Default Usage

<Toggle initial={false}>
  {({ on, toggle }) => (
    <div>
      <Button onClick={toggle}>Open Drawer</Button>
      <Drawer isVisible={on} onClose={toggle}>
        {Array.from({ length: 100 }).map((item, index) => (
          <div
            key={index}
            style={{
              color: 'white',
              height: 100,
              width: '100%',
              backgroundColor: colors.darkBlue,
              textAlign: 'center',
              fontSize: 24,
            }}
          >
            {index}
          </div>
        ))}
      </Drawer>
    </div>
  )}
</Toggle><Toggle initial={false}>
  {({ on, toggle }) => (
    <div>
      <Button onClick={toggle}>Open Drawer</Button>
      <Drawer isVisible={on} onClose={toggle}>
        {Array.from({ length: 100 }).map((item, index) => (
          <div
            key={index}
            style={{
              color: 'white',
              height: 100,
              width: '100%',
              backgroundColor: colors.darkBlue,
              textAlign: 'center',
              fontSize: 24,
            }}
          >
            {index}
          </div>
        ))}
      </Drawer>
    </div>
  )}
</Toggle>

With custom Header and Footer

<Toggle initial={false}>
  {({ on, toggle }) => (
    <div>
      <Button onClick={toggle}>Open Drawer</Button>
      <Drawer
        isVisible={on}
        onClose={toggle}
        header={
          <div className="d-flex justify-content-end p-3">
            <Button className="mr-2">Action 1</Button>
            <Button theme="secondary">Action 2</Button>
          </div>
        }
        footer={
          <div className="d-flex justify-content-end p-3">
            <Button className="mr-2">Action 1</Button>
            <Button theme="secondary">Action 2</Button>
          </div>
        }
      >
        <Heading>The brown fox jumped over the lazy dog</Heading>
        <Heading as="h2">The brown fox jumped over the lazy dog</Heading>
        <Heading as="h3">The brown fox jumped over the lazy dog</Heading>
        <Heading as="h4">The brown fox jumped over the lazy dog</Heading>
        <Heading as="h5">The brown fox jumped over the lazy dog</Heading>
      </Drawer>
    </div>
  )}
</Toggle><Toggle initial={false}>
  {({ on, toggle }) => (
    <div>
      <Button onClick={toggle}>Open Drawer</Button>
      <Drawer
        isVisible={on}
        onClose={toggle}
        header={
          <div className="d-flex justify-content-end p-3">
            <Button className="mr-2">Action 1</Button>
            <Button theme="secondary">Action 2</Button>
          </div>
        }
        footer={
          <div className="d-flex justify-content-end p-3">
            <Button className="mr-2">Action 1</Button>
            <Button theme="secondary">Action 2</Button>
          </div>
        }
      >
        <Heading>The brown fox jumped over the lazy dog</Heading>
        <Heading as="h2">The brown fox jumped over the lazy dog</Heading>
        <Heading as="h3">The brown fox jumped over the lazy dog</Heading>
        <Heading as="h4">The brown fox jumped over the lazy dog</Heading>
        <Heading as="h5">The brown fox jumped over the lazy dog</Heading>
      </Drawer>
    </div>
  )}
</Toggle>

With overflowing content

<Toggle initial={false}>
  {({ on, toggle }) => (
    <div>
      <Button onClick={toggle}>Open Drawer</Button>
      <Drawer
        isVisible={on}
        onClose={toggle}
        footer={
          <div className="d-flex justify-content-end p-3">
            <Button className="mr-2">Action 1</Button>
            <Button theme="secondary">Action 2</Button>
          </div>
        }
      >
        {Array.from({ length: 100 }).map((item, index) => (
          <div
            key={index}
            style={{
              color: 'white',
              height: 100,
              width: '100%',
              backgroundColor: colors.darkBlue,
              textAlign: 'center',
              fontSize: 24,
            }}
          >
            {index}
          </div>
        ))}
      </Drawer>
    </div>
  )}
</Toggle><Toggle initial={false}>
  {({ on, toggle }) => (
    <div>
      <Button onClick={toggle}>Open Drawer</Button>
      <Drawer
        isVisible={on}
        onClose={toggle}
        footer={
          <div className="d-flex justify-content-end p-3">
            <Button className="mr-2">Action 1</Button>
            <Button theme="secondary">Action 2</Button>
          </div>
        }
      >
        {Array.from({ length: 100 }).map((item, index) => (
          <div
            key={index}
            style={{
              color: 'white',
              height: 100,
              width: '100%',
              backgroundColor: colors.darkBlue,
              textAlign: 'center',
              fontSize: 24,
            }}
          >
            {index}
          </div>
        ))}
      </Drawer>
    </div>
  )}
</Toggle>

Drawer

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Props

Examples

Default Usage

With custom Header and Footer

With overflowing content

Props