Collapse 折叠面板

介绍

创建一个连续可收缩区域，降多组内容放在其中。

使用指南

一般用法

values为展开状态的tms-collapse-item的value数组集合

  <demo-block title="常规模式" no-background>
    <tms-collapse values="{{values}}" bind:onChange="onChange">
        <tms-collapse-item value="数据一" title="标题1">
            <view>content1</view>
        </tms-collapse-item>

        <tms-collapse-item value="数据二" title="标题2">
            <view>content2</view>
        </tms-collapse-item>

        <tms-collapse-item value="数据三" title="标题3">
            <view>content3</view>
        </tms-collapse-item>
    </tms-collapse>
:::

Component({
    data: {
      values: ['数据一'],
    },
    methods:{   
      onChange(event) {
        this.setData({
          values: event.detail,
        });
      },
    }
})

手风琴模式

在手风琴模式下，values只有数组第一个元素生效。

  <demo-block title="手风琴效果" no-background>
    <tms-collapse values="{{valuesAccordion}}" bind:onChange="onChangeAccordion" accordion>
        <tms-collapse-item useSlotTitle value="数据一" title="标题1">
            <view slot="title" class="custom-title">
                slotTitle
            </view>
            <view>content1</view>
        </tms-collapse-item>

        <tms-collapse-item value="数据二" title="标题2">
            <view>content2</view>
        </tms-collapse-item>

        <tms-collapse-item value="数据三" title="标题3">
            <view>content3</view>
        </tms-collapse-item>
    </tms-collapse>
:::

Component({
    data: {
      valuesAccordion: ['数据三'],
    },
    methods:{
      onChange(event) {
        this.setData({
          values: event.detail,
        });
      },
  }
})

API

属性	说明	类型	默认值	版本
values	展开面板对应的value集合	array	[]
accordion	是否手风琴模式，同时只有一个展开面板	boolean	false

EVENTS

属性	说明	类型
bind:change	点击面板标题时触发	(event) => {}

change事件event.detail为新的面板状态，如果不更新values，面板状态不会变化。

css变量

// 面板背景色
--collapse-background: #fff;
// 面板根容器padding
--collapse-root-padding: 32rpx;
// 面板标签背景色
--collapse-title-background: rgba(245, 246, 246, .5);
// 面板内容容器padding
--collapse-content-padding: 0 32rpx;

FAQ