Lin UI

#
折叠面板 Collapse

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

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

# 普通模式

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

height=200

# 示例代码

<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只能同时展开一个。

height=200

# 示例代码

<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注入自定义标题

center height=200

<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>

# 折叠面板属性

参数 说明 类型 可选值 默认值 版本号
type 折叠面板类型 String normal/accordion normal -
expand-item-id 初始状态需要展开的折叠面板子项id（手风琴模式下取数组第一个值） Array - -

# 折叠面板子项属性

参数 说明 类型 可选值 默认值 版本号
item-id 折叠面板子项id，需要确保唯一性 String - 折叠面板子项索引值 -
disable 是否禁用折叠面板 Boolean - false -
title 标题文字 String - 默认标题
custom-title 是否开启自定义标题区内容（slot注入） Boolean - false
animation-time 内容区域展开动画速度（单位：秒） Number - 0.3 -

# 折叠面板外部样式类

外部样式类名 说明 备注 版本号
l-class 覆盖折叠面板整体样式 - -

# 折叠面板子项外部样式类

外部样式类名 说明 备注 版本号
l-class 覆盖折叠面板子项整体样式 - -
l-title-class 覆盖折叠面板子项标题样式 - -
l-body-class 覆盖折叠面板子项内容区样式 - -

# 折叠面板事件

事件名称 说明 返回值 备注 版本号
bind:linfold 折叠面板折叠回调事件 折叠面板子项id - -
bind:linexpand 折叠面板展开回调事件 折叠面板子项id - -

# 折叠面板子项插槽

Slot名称 说明 备注 版本号
title 折叠面板标题区域 -

    ← 头像 Avatar →