Drawer

Basic Usage

Loading...

function Demo() {
  const [show, setShow] = useState(false)

  return (
    <>
      <CButton
        label="Click to open drawer"
        onClick={() => setShow(true)}
      />
      <CDrawer
        show={show}
        onShowChange={setShow}
        title="Hi, there"
      >
        Hello, world.
      </CDrawer>
    </>
  )
}

Fold/Expand Code

Positions

Loading...

function Demo() {
  const { matArrowBack, matArrowUpward, matArrowForward, matArrowDownward } =
    MdIcons

  const [show, setShow] = useState(false)

  const [position, setPosition] = useState('left')

  const openWithPosition = pos => {
    setPosition(pos)
    setShow(true)
  }

  return (
    <div>
      <SpaceItems>
        <CButton
          icon
          onClick={() => openWithPosition('left')}
        >
          <CIcon content={matArrowBack} />
        </CButton>
        <CButton
          icon
          onClick={() => openWithPosition('top')}
        >
          <CIcon content={matArrowUpward} />
        </CButton>
        <CButton
          icon
          onClick={() => openWithPosition('right')}
        >
          <CIcon content={matArrowForward} />
        </CButton>
        <CButton
          icon
          onClick={() => openWithPosition('bottom')}
        >
          <CIcon content={matArrowDownward} />
        </CButton>
      </SpaceItems>
      <CDrawer
        show={show}
        onShowChange={setShow}
        title="Hi, there"
        position={position}
      >
        Hello, world
      </CDrawer>
    </div>
  )
}

Fold/Expand Code

Props

Name (*for required)	Description	Type	Default Value

No Data