Collapse 折叠面板

概述

Collapse 折叠面板，可以折叠/展开的内容区域。
Collapse 提供了 fui-collapse 和 fui-collapse-item 两个组件，其中 fui-collapse-item 组件可独立使用，需要手风琴效果时结合 fui-collapse 组件一起使用。

引入

以下介绍两种常用的引入方式。

第一种：在页面json文件中引入

{
  "navigationBarTitleText": "折叠面板",
  "usingComponents": {
    "fui-collapse": "/components/firstui/fui-collapse/fui-collapse",
    "fui-collapse-item": "/components/firstui/fui-collapse-item/fui-collapse-item"
  }
}

第二种：在根目录app.json文件中全局引入

"usingComponents": {
    "fui-collapse": "components/firstui/fui-collapse/fui-collapse",
    "fui-collapse-item": "components/firstui/fui-collapse-item/fui-collapse-item"
}

代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

fui-collapse-item 组件可单独使用 ，bindchange 事件仅无父组件 fui-collapse 时生效。

<fui-collapse-item bindchange="change">
  <view class="fui-item__box">
	<image src="/static/images/common/logo.png" class="fui-logo"></image>
	<text>First UI</text>
  </view>
  <view class="fui-descr" slot="content">First UI 是一套基于微信小程序开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。</view>
</fui-collapse-item>

.fui-item__box {
	width: 100%;
	padding: 26rpx 32rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

.fui-logo {
	width: 48rpx;
	height: 48rpx;
	margin-right: 24rpx;
	display: block;
}

.fui-descr {
	width: 100%;
	padding: 32rpx;
	font-size: 28rpx;
	line-height: 52rpx;
	color: #7F7F7F;
	word-break: break-all;
	box-sizing: border-box;
}

默认展开

通过 index 属性设置折叠面板项索引或者唯一标识，open 属性设置是否展开。

<fui-collapse bindchange="change">
  <fui-collapse-item index="{{index}}" open="{{item.isOpen}}" wx:for="{{items}}" wx:key="index">
	<view class="fui-item__box">
	  <image src="{{item.src}}" class="fui-logo"></image>
	  <text>{{item.title}}</text>
	</view>
	<view slot="content" class="fui-descr" style="background-color: rgba(255, 183, 3, .1);">{{item.descr}}</view>
  </fui-collapse-item>
</fui-collapse>

items: [{
	src: '/static/images/common/logo.png',
	title: 'First UI',
	descr: 'First UI 是一套基于微信小程序开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。',
	isOpen: true
}, {
	src: '/static/images/common/icon_tabbar_2x.png',
	title: '标题内容',
	descr: '自定义折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开。再次点击标题，折叠内容。'
}]

手风琴效果

通过设置 fui-collapse 组件的 accordion 属性来控制是否为手风琴效果。

 <fui-collapse accordion bindchange="change">
  <fui-collapse-item index="{{index}}" wx:for="{{items}}" wx:key="index">
	<view class="fui-item__box">
	  <image src="{{item.src}}" class="fui-logo"></image>
	  <text>{{item.title}}</text>
	</view>
	<view slot="content" class="fui-descr" style="background-color: rgba(255, 183, 3, .1);">{{item.descr}}</view>
  </fui-collapse-item>
</fui-collapse>

items: [{
	src: '/static/images/common/logo.png',
	title: 'First UI',
	descr: 'First UI 是一套基于微信小程序开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。',
	isOpen: true
}, {
	src: '/static/images/common/icon_tabbar_2x.png',
	title: '标题内容',
	descr: '自定义折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开。再次点击标题，折叠内容。'
}]

Slots

fui-collapse 组件

插槽名称	说明
default	折叠面板内容，内部由多个 fui-collapse-item 组件组成

fui-collapse-item 组件

名称	说明
default	折叠面板item项标题部分自定义内容
content	折叠面板item项折叠部分自定义内容

Props

fui-collapse 组件

属性名	类型	说明	默认值	其他说明
accordion	Boolean	是否开启手风琴效果	false	-

fui-collapse-item 组件

属性名	类型	说明	默认值	其他说明
index	Number, String	item项索引或者唯一标识	0	-
disabled	Boolean	是否禁用点击	false	-
background	String	标题内容背景色	#fff	-
animation	Boolean	是否显示动画,如果动画卡顿严重建议不开启	true	-
open	Boolean	是否展开	false	-
isBorder	Boolean	是否显示标题内容部分底部线条	true	-
borderColor	String	线条颜色	-	如果值为空，可通过css变量（--fui-color-border）来修改颜色值
borderLeft	Number, String	线条距左侧偏移距离，单位rpx	0	-
arrow	Boolean	是否显示箭头	true	-
arrowColor	String	箭头颜色	#B2B2B2	-
arrowRight	Number, String	箭头距右侧偏移距离，单位rpx	24	-
contentBg	String	折叠内容背景色	#fff	-

Events

fui-collapse 组件

事件名	说明	回调参数
bind:change	点击切换时触发	event.detail = {   index : item项索引或者唯一标识,   isOpen : 是否展开 }

fui-collapse-item 组件

该组件可独立使用，且bindchange事件仅独立使用（无父组件 fui-collapse）时有效。

事件名	说明	回调参数
bind:change	点击切换时触发（仅独立使用时生效）	event.detail = {   index : item项索引或者唯一标识,   isOpen : 是否展开 }

示例预览