支付寶小程序擴(kuò)展組件 折疊面板·Collapse

可以折疊 / 展開(kāi)的內(nèi)容區(qū)域。

• 對(duì)復(fù)雜區(qū)域進(jìn)行分組和隱藏，保持頁(yè)面的整潔；
• 手風(fēng)琴模式 是一種特殊的折疊面板，只允許單個(gè)內(nèi)容區(qū)域展開(kāi)。

掃碼體驗(yàn)

示例代碼

{
  "defaultTitle": "Collapse",
  "usingComponents": {
    "collapse": "mini-ali-ui/es/collapse/index",
    "collapse-item": "mini-ali-ui/es/collapse/collapse-item/index"
  }
}
<view>
  <view class="demo-title">基礎(chǔ)用法</view>
  <collapse
    className="demo-collapse"
    collapseKey="collapse1"
    activeKey="{{['item-11', 'item-13']}}"
    onChange="onChange"
  >
    <collapse-item header="標(biāo)題1" itemKey="item-11" collapseKey="collapse1">
      <view class="item-content">
        <block a:for="{{randomLine}}">
          <view>自適應(yīng)高度的內(nèi)容區(qū)域 共 {{index + 1}} 行</view>
        </block>
      </view>
    </collapse-item>
    <collapse-item header="標(biāo)題2" itemKey="item-12" collapseKey="collapse1">
      <view class="item-content content2">
        <view>內(nèi)容區(qū)域</view>
      </view>
    </collapse-item>
    <collapse-item header="標(biāo)題3" itemKey="item-13" collapseKey="collapse1">
      <view class="item-content content3">
        <view>內(nèi)容區(qū)域</view>
      </view>
    </collapse-item>
  </collapse>
  <view class="demo-title">手風(fēng)琴模式</view>
  <collapse
    className="demo-collapse"
    collapseKey="collapse2"
    activeKey="{{['item-21', 'item-23']}}"
    onChange="onChange"
    accordion="{{true}}"
  >
    <collapse-item header="標(biāo)題1" itemKey="item-21" collapseKey="collapse2">
      <view class="item-content">
        <block a:for="{{randomLine}}">
          <view>自適應(yīng)高度的內(nèi)容區(qū)域 共 {{index + 1}} 行</view>
        </block>
      </view>
    </collapse-item>
    <collapse-item header="標(biāo)題2" itemKey="item-22" collapseKey="collapse2">
      <view class="item-content content2">
        <view>內(nèi)容區(qū)域</view>
      </view>
    </collapse-item>
    <collapse-item header="標(biāo)題3" itemKey="item-23" collapseKey="collapse2">
      <view class="item-content content3">
        <view>內(nèi)容區(qū)域</view>
      </view>
    </collapse-item>
  </collapse>  
</view>
.item-content {
  padding: 14px 16px;
  font-size: 17px;
  color: #333;
  line-height: 24px;
}


.content1 {
  height: 200px;
}

屬性

Collapse 折疊面板主要是有 <collapse> 和 <collapse-item> 兩部分組成，所以，屬性也有所不同。

collapse-item

Bug & Tip

• 當(dāng)頁(yè)面中存在多個(gè) collapse 組件時(shí)，collapse 所對(duì)應(yīng)的 collapse-item 的 collapseKey 屬性為必選值并且必須相等；
• 當(dāng)頁(yè)面中只有一個(gè) collapse 組件時(shí)，collapseKey 不需要提供；
• 如 accordion 為 true 時(shí)，activeKey 傳值僅為字符串，如果傳數(shù)組將導(dǎo)致取值錯(cuò)誤，展示默認(rèn)的第一個(gè)；