抽屉

基础使用

Loading...

function Demo() {

  const [show, setShow] = useState(false)

  return (
    <>
      <CButton label="点击打开抽屉" onClick={() => setShow(true)} />
      <CDrawer show={show} onShowChange={setShow} title="你好">
        一些抽屉内容
      </CDrawer>
    </>
  )
}

折叠/展开 代码

位置

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="你好" position={position}>
      一些抽屉内容
    </CDrawer>
  </div>)
}

折叠/展开 代码

Props

名称 (*代表必须)	描述	类型	默认值

No Data