# Collapse 折叠面板

# 介绍

将内容放置在折叠面板中,点击面板的标题可以展开或收缩其内容。

# 引入

"usingComponents": {
  "m-collapse": "/dist/collapse/index"
}

# 示例

<m-collapse visible="{{ isShow }}" duraion="300">
	<view>
		contain
		注:最外层 view 不可设置 `margin-top` 与 `margin-botton`,
		否则会影响组件内部高度计算,
		如有需要,请在包裹标签中设置。
	</view>
</m-collapse>

<m-button bind:click="handleCollapseSwitch">collapse 面板</m-button>
Page({
  data: {
    isShow: false,
  },

  handleCollapseSwitch() {
    this.setData({
      isShow: !this.data.isShow
    })
  }
})

# Properties

参数 说明 类型 可选值 默认值
visible 是否展开折叠面板 Boolean false
duration 动画时长(单位ms) Number 300

# Events

名称 说明 返回值
bind:change 折叠面板动画结束回调 面板开启/关闭对应的 Boolean

# Slot

名称 说明
- 折叠面板内容