Dropdown

Basic Usage

Loading...

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

  return (
    <CDropdown
      value={show}
      onChange={setShow}
      dropContent={<p>Some dropdown content</p>}
    >
      <CButton label="Click to show dropdown" />
    </CDropdown>
  )
}

Fold/Expand Code

Width Exceed Parent

Loading...

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

  return (
    <CDropdown
      value={show}
      onChange={setShow}
      widthWithinParent={false}
      dropContent={
        <p style={{ width: '400px' }}>Some long content. Some long content.</p>
      }
    >
      <CButton label="Click to show dropdown" />
    </CDropdown>
  )
}

Fold/Expand Code

Manual Control

Loading...

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

  return (
    <>
      <CButton
        label={`Click to ${show ? 'fold' : 'show'}`}
        onClick={() => setShow(!show)}
      />
      <CDropdown
        value={show}
        manual
        dropContent={<p>Some dropdown content</p>}
      >
        <h3>Click the left to control</h3>
      </CDropdown>
    </>
  )
}

Fold/Expand Code

Props

Name (*for required)	Description	Type	Default Value

No Data