折叠器

基础使用

<CExpansion title="点击展开/收起">
  <div className="c-pa-md">
    <p>你好，世界</p>
    <p>你好，世界</p>
    <p>你好，世界</p>
    <p>你好，世界</p>
  </div>
</CExpansion>

标题图标

<>
  <CExpansion
    title="左侧标题图标"
    icon={<CIcon content={MdIcons.matPeople} />}
  >
    <div className="c-pa-lg">
      <p>代码能够运行并满足业务要求是最低标准</p>
    </div>
  </CExpansion>
  <CExpansion
    title="左侧标题图标"
    icon={<CIcon content={MdIcons.matNaturePeople} />}
  >
    <div className="c-pa-lg">
      <p>代码能够运行并满足业务要求是最低标准</p>
    </div>
  </CExpansion>
</>

自定义箭头

<>
  <CExpansion
    title="自定义arrow图标"
    arrow={() => <CIcon content={MdIcons.matArrowCircleDown} />}
  >
    <div className="c-pa-lg">
      <p>哇哦，自定义箭头</p>
    </div>
  </CExpansion>
  <CExpansion
    title="自定义arrow图标"
    arrow={open => (
      <CIcon content={open ? MdIcons.matPeople : MdIcons.matNaturePeople} />
    )}
  >
    <div className="c-pa-lg">
      <p>展开、折叠状态展示不同图标</p>
    </div>
  </CExpansion>
</>

从上方展开

<CExpansion
  title="点击展开/收起"
  reverse
>
  <div className="c-pa-md">
    <p>你好，世界</p>
    <p>你好，世界</p>
    <p>你好，世界</p>
    <p>你好，世界</p>
  </div>
</CExpansion>

Props

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

No Data

基础使用​

标题图标​

自定义箭头​

从上方展开​

Props​

基础使用

标题图标

自定义箭头

从上方展开

Props