Develop ultra fast with Prismane 🎉
Logo
Quick Search...

Drawer

Drawer displays a container that slides from the side and occupies the users attention.
Category: Overlay Source

Import

 
import { Drawer } from "@prismane/core";

Drawer component has the following inner components:

  • - Drawer.Header - The header container for the drawer.
  • - Drawer.Footer - The footer container for the drawer.

Usage

 
function Demo() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Drawer</Button>
      <Drawer open={open} closable onClose={() => setOpen(false)}>
        Press Esc key to close the Drawer. Or just click the backdrop.
      </Drawer>
    </>
  );
}

Complex Drawer

The Drawer component has the inner components of Drawer.Header and Drawer.Footer, which help with visually separating the content. When Drawer has a closable prop, then a close button is displayed inside the Drawer.Header component.

function Demo() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Drawer</Button>
      <Drawer open={open} closable onClose={() => setOpen(false)}>
        <Drawer.Header>
          <Text as="h1">Create Account</Text>
        </Drawer.Header>
        <Form>
          <TextField
            name="username"
            label="Username:"
            placeholder="Enter your username"
          />
          <TextField
            name="email"
            label="Email:"
            placeholder="Enter your email"
          />
          <PasswordField
            name="password"
            label="Password:"
            placeholder="Enter your password"
          />
        </Form>
        <Drawer.Footer gap={fr(2)}>
          <Button
            onClick={() => setOpen(false)}
            variant="tertiary"
            color="base"
          >
            Cancel
          </Button>
          <Button>Create Account</Button>
        </Drawer.Footer>
      </Drawer>
    </>
  );
}

Drawer Positions

The Drawer component's position prop supports the values: left, right, top and bottom. By default, Drawer uses a position of left.

function Demo() {
  const [top, setTop] = useState(false);
  const [bottom, setBottom] = useState(false);
  const [left, setLeft] = useState(false);
  const [right, setRight] = useState(false);

  return (
    <>
      <Button onClick={() => setTop(true)}>Toggle Top Drawer</Button>
      <Drawer open={top} closable onClose={() => setTop(false)} position="top">
        Press Esc key to close the Drawer. Or just click the backdrop.
      </Drawer>
      <Button onClick={() => setBottom(true)}>Toggle Bottom Drawer</Button>
      <Drawer
        open={bottom}
        closable
        onClose={() => setBottom(false)}
        position="bottom"
      >
        Press Esc key to close the Drawer. Or just click the backdrop.
      </Drawer>
      <Button onClick={() => setRight(true)}>Toggle Right Drawer</Button>
      <Drawer
        open={right}
        closable
        onClose={() => setRight(false)}
        position="right"
      >
        Press Esc key to close the Drawer. Or just click the backdrop.
      </Drawer>
      <Button onClick={() => setLeft(true)}>Toggle Left Drawer</Button>
      <Drawer
        open={left}
        closable
        onClose={() => setLeft(false)}
        position="left"
      >
        Press Esc key to close the Drawer. Or just click the backdrop.
      </Drawer>
    </>
  );
}

Drawer Sizes

The Drawer component's size prop has supporort for all of PrismaneBreakpoints and any other CSS size. The size property will change the width or height of the Drawer depending on the value of the position prop. By default, size has a value of base.

function Demo() {
  const [position, setPosition] = useState("left");
  const [size, setSize] = useState("base");
  const [open, setOpen] = useState(false);

  return (
    <Flex direction="column" gap={fr(4)}>
      <Drawer
        open={open}
        closable
        onClose={() => setOpen(false)}
        position={position}
        size={size}
      >
        Press Esc key to close the Drawer. Or just click the backdrop.
      </Drawer>
      <Text>Drawer Size</Text>
      <Radio.Group
        name="size"
        value={size}
        onChange={(e) => setSize(e.target.value)}
      >
        <Radio value="xs" label="xs" />
        <Radio value="sm" label="sm" />
        <Radio value="base" label="base" />
        <Radio value="md" label="md" />
        <Radio value="lg" label="lg" />
        <Radio value="550px" label="550px" />
      </Radio.Group>
      <Text>Drawer Position</Text>
      <Radio.Group
        name="position"
        value={position}
        onChange={(e) => setPosition(e.target.value)}
      >
        <Radio value="left" label="left" />
        <Radio value="right" label="right" />
        <Radio value="top" label="top" />
        <Radio value="bottom" label="bottom" />
      </Radio.Group>
      <Button onClick={() => setOpen(true)}>Open Drawer</Button>
    </Flex>
  );
}

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

Go BackDivider
Up NextField