Expansion

Basic Usage

Loading...

<CExpansion title="Click to open/fold">
  <div className="c-pa-md">
    <p>Hello, World</p>
    <p>Hello, World</p>
    <p>Hello, World</p>
    <p>Hello, World</p>
  </div>
</CExpansion>

Fold/Expand Code

Icon

Loading...

<>
  <CExpansion
    title="Some Icon"
    icon={<CIcon content={MdIcons.matPeople} />}
  >
    <div className="c-pa-lg">
      <p>Some expandable content</p>
    </div>
  </CExpansion>
  <CExpansion
    title="Some Icon"
    icon={<CIcon content={MdIcons.matNaturePeople} />}
  >
    <div className="c-pa-lg">
      <p>Some expandable content</p>
    </div>
  </CExpansion>
</>

Fold/Expand Code

Customize Arrow

Loading...

<>
  <CExpansion
    title="Customize Arrow"
    arrow={() => <CIcon content={MdIcons.matArrowCircleDown} />}
  >
    <div className="c-pa-lg">
      <p>Look! It's custom arrow</p>
    </div>
  </CExpansion>
  <CExpansion
    title="Customize Arrow"
    arrow={open => (
      <CIcon content={open ? MdIcons.matPeople : MdIcons.matNaturePeople} />
    )}
  >
    <div className="c-pa-lg">
      <p>Different icon when folded/opened</p>
    </div>
  </CExpansion>
</>

Fold/Expand Code

Expand From Top

Loading...

<CExpansion
  title="Click to open/fold"
  reverse
>
  <div className="c-pa-md">
    <p>Hello, World</p>
    <p>Hello, World</p>
    <p>Hello, World</p>
    <p>Hello, World</p>
  </div>
</CExpansion>

Fold/Expand Code

Props

Name (*for required)	Description	Type	Default Value

No Data