### 何时使用

需要将分组内容收纳或隐藏时；

信息内容较多或较复杂，需引导用户先浏览主题，再查看详情内容时。

### 与布局相关

##### 通常布局在内容区，对不同类型的信息进行组织分类，便于用户检索和查看。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/guide/Collapse1.png" />
    <em>图示：上下结构时，布局在下方内容区</em>
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/guide/collapse%E5%A4%A7%E4%BA%8C%402x.png" />
    <em>图示：左右结构时，布局在右侧内容区</em>
  </div>
</div>

<hr />

### 组件搭配使用

##### 与表单搭配使用，在展开的面板中进行信息的添加或编辑，可以给用户扁平沉浸的编辑状态，避免弹出层或进入二级界面带来的任务打断。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/guide/Collapse3.png" />
    <em></em>
  </div>
</div>

### 常见用法

##### 折叠面板展开时吸顶显示，当展开内容过多时，便于用户实时了解内容主题或类型。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/guide/Collapse4.png" />
    <em></em>
  </div>
</div>

### 推荐/慎用示例

##### 摘要信息不宜过多，建议提炼关键信息，如有较多详情内容可放在折叠区域显示，帮助用户区分主次信息层级。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/guide/Collapse5.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/guide/Collapse6.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
  </div>
</div>

<hr />

##### 选择合适的展开和收起图标或文字标识，避免用户混淆面板的折叠和展开状态。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/guide/Collapse7.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/guide/Collapse8.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
  </div>
</div>

<hr />
