# 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
名称 | 说明 |
---|---|
- | 折叠面板内容 |