title: 折叠面板 Collapse

折叠面板 Collapse

折叠面板，常见应用场景为折叠菜单、优惠券详情展示

折叠面板需要collapse和collapse-item组件关联使用

普通模式

折叠面板默认为普通模式。普通模式下，多个collapse-item可以同时展开。

:::img :::

示例代码

<l-collapse>
  <l-collapse-item title="Lin UI">
    Lin UI 是基于微信小程序原生语法实现的组件库。遵循简洁，易用的设计规范。
  </l-collapse-item>
  <l-collapse-item title="Lin-CMS">
    Lin-CMS 是林间有风团队经过大量项目实践所提炼出的一套内容管理系统框架。
    Lin-CMS 可以有效的帮助开发者提高 CMS 的开发效率。
  </l-collapse-item>
  <l-collapse-item title="林间有风">
    林间有风是一个团队
  </l-collapse-item>
</l-collapse>

手风琴模式

通过type='accordion'指定折叠面板为手风琴模式。手风琴模式下多个collapse-item只能同时展开一个。

:::img :::

示例代码

<l-collapse type="accordion">
  <l-collapse-item title="Lin UI">
    Lin UI 是基于微信小程序原生语法实现的组件库。遵循简洁，易用的设计规范。
  </l-collapse-item>
  <l-collapse-item title="Lin-CMS">
    Lin-CMS 是林间有风团队经过大量项目实践所提炼出的一套内容管理系统框架。
    Lin-CMS 可以有效的帮助开发者提高 CMS 的开发效率。
  </l-collapse-item>
  <l-collapse-item title="林间有风">
    林间有风是一个团队
  </l-collapse-item>
</l-collapse>

自定义标题

如果需要更复杂的布局，可以使用slot注入自定义标题

:::img :::

<l-collapse>
  <l-collapse-item l-body-class="l-body-class" l-title-class="l-title-class" customTitle="{{true}}">
    <!--自定义标题-->
    <view class="title" slot="title">
      <view class="ticket-detail-container">使用规则
        <l-icon name="down" size="16" color="#999"/>
      </view>
      <l-button l-class height="50" size="mini" shape="semicircle" plain="{{true}}">立即使用</l-button>
    </view>
    <text>1、本券一次使用1张限1件商品，自领取日起有效期7天。\n2、本优惠券不与其他优惠同享</text>
  </l-collapse-item>
<l-collapse>

折叠面板属性

折叠面板子项属性

折叠面板外部样式类

折叠面板子项外部样式类

折叠面板事件

折叠面板子项插槽