下拉

基础使用

Loading...

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

  return (
    <CDropdown
      value={show}
      onChange={setShow}
      dropContent={<p>一些下拉内容</p>}
    >
      <CButton label="点击展示下拉" />
    </CDropdown>
  )
}

折叠/展开 代码

自定义内容宽度

Loading...

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

  return (
    <CDropdown
      value={show}
      onChange={setShow}
      widthWithinParent={false}
      dropContent={<p style={{ width: '400px' }}>一些下拉内容</p>}
    >
      <CButton label="点击展示下拉" />
    </CDropdown>
  )
}

折叠/展开 代码

手动控制

Loading...

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

  return (
    <>
    <CButton label="点击收起/展开下拉" onClick={() => setShow(!show)} />
    <CDropdown
      value={show}
      manual
      dropContent={<p>一些下拉内容</p>}
    >
      <h3>点击左边按钮收起/展开下拉</h3>
    </CDropdown>
    </>
  )
}

折叠/展开 代码

属性

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

No Data