Sliding Drawer

Usage

Import

import { Drawer } from '@passfort/castle'
content_copy
Copy

Example

function Example() {
  const { isOpen, onOpen, onClose } = useDisclosure()

  return (
    <>
      <Button onClick={() => onOpen()} label="Open" />
      <Drawer
        title="Title"
        isOpen={isOpen}
        onClose={onClose}
        renderFooter={() => <Button label="Action" type="primary" />}
      >
        <Text>Content goes here.</Text>
      </Drawer>
    </>
  )
}
function Example() {
  const { isOpen, onOpen, onClose } = useDisclosure()

  return (
    <>
      <Button onClick={() => onOpen()} label="Open" />
      <Drawer
        title="Title"
        isOpen={isOpen}
        onClose={onClose}
        renderFooter={() => <Button label="Action" type="primary" />}
      >
        <Text>Content goes here.</Text>
      </Drawer>
    </>
  )
}
content_copy
Copy
live example

Placement

use the placement prop to position the drawer.

function Example() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  const btnRef = React.useRef()

  return (
    <>
      <Button onClick={() => onOpen()} label="Open" />
      <Drawer
        title="Top"
        placement="top"
        isOpen={isOpen}
        onClose={onClose}
        renderFooter={() => <Button label="Action" type="primary" />}
      >
        <Text>Content goes here.</Text>
      </Drawer>
    </>
  )
}
function Example() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  const btnRef = React.useRef()

  return (
    <>
      <Button onClick={() => onOpen()} label="Open" />
      <Drawer
        title="Top"
        placement="top"
        isOpen={isOpen}
        onClose={onClose}
        renderFooter={() => <Button label="Action" type="primary" />}
      >
        <Text>Content goes here.</Text>
      </Drawer>
    </>
  )
}
content_copy
Copy
live example

Lists

For lists you can disable padding using hasPadding prop.

function Example() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  const btnRef = React.useRef()

  return (
    <>
      <Button onClick={() => onOpen()} label="Open" />
      <Drawer
        hasPadding={false}
        title="Title"
        isOpen={isOpen}
        onClose={onClose}
      >
        <List>
          <ListItem> List Item </ListItem>
          <ListItem> List Item </ListItem>
          <ListItem> List Item </ListItem>
        </List>
      </Drawer>
    </>
  )
}
function Example() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  const btnRef = React.useRef()

  return (
    <>
      <Button onClick={() => onOpen()} label="Open" />
      <Drawer
        hasPadding={false}
        title="Title"
        isOpen={isOpen}
        onClose={onClose}
      >
        <List>
          <ListItem> List Item </ListItem>
          <ListItem> List Item </ListItem>
          <ListItem> List Item </ListItem>
        </List>
      </Drawer>
    </>
  )
}
content_copy
Copy
live example