Collapse

2021-07-21 11:23

Collapse/expand a content region.

• Group or hide complex region to keep the page clean and tidy.
• Accordion mode is a special collapse which allows opening just one content region.

Sample Code

copy

	{
	  "defaultTitle": "Mini Program AntUI component library",
	  "usingComponents": {
	    "collapse": "mini-antui/es/collapse/index",
	    "collapse-item": "mini-antui/es/collapse/collapse-item/index"
	  }
	}

copy

	<view>
	  <view class="demo-title">Basic usage</view>
	  <collapse
	    className="demo-collapse"
	    collapseKey="collapse1"
	    activeKey="{{['item-11', 'item-13']}}"
	    onChange="onChange"
	  >
	    <collapse-item header="Title 1" itemKey="item-11" collapseKey="collapse1">
	      <view class="item-content content1">
	        <view>Content region</view>
	      </view>                
	    </collapse-item>
	    <collapse-item header="Title 2" itemKey="item-12" collapseKey="collapse1">
	      <view class="item-content content2">
	        <view>Content region</view>
	      </view>
	    </collapse-item>
	    <collapse-item header="Title 3" itemKey="item-13" collapseKey="collapse1">
	      <view class="item-content content3">
	        <view>Content region</view>         
	      </view>
	    </collapse-item>
	  </collapse>
	  <view class="demo-title">Accordion mode</view>
	  <collapse
	    className="demo-collapse"
	    collapseKey="collapse2"
	    activeKey="{{['item-21', 'item-23']}}"
	    onChange="onChange"
	    accordion="{{true}}"
	  >
	    <collapse-item header="Title 1" itemKey="item-21" collapseKey="collapse2">
	      <view class="item-content content1">
	        <view>Content region</view>
	      </view>                
	    </collapse-item>
	    <collapse-item header="Title 2" itemKey="item-22" collapseKey="collapse2">
	      <view class="item-content content2">
	        <view>Content region</view>
	      </view>
	    </collapse-item>
	    <collapse-item header="Title 3" itemKey="item-23" collapseKey="collapse2">
	      <view class="item-content content3">
	        <view>Content region</view>         
	      </view>
	    </collapse-item>
	  </collapse>  
	</view>

copy

	.item-content {
	  padding: 14px 16px;
	  font-size: 17px;
	  color: #333;
	  line-height: 24px;
	}
	
	.content1 {
	  height: 200px;
	}
	
	.content2 {
	  height: 50px;
	}
	
	.content3 {
	  height: 100px;
	}
	
	.demo-title {
	  padding: 14px 16px;
	  color: #999;
	}
	
	.demo-collapse {
	  border-bottom: 1px solid #eee;
	}

copy

	Page({});

Attributes

Property	Description	Type	Default
activeKey	Key of the active tab panel.	Array / String	None by default, or the first element by default in the accordion mode
onChange	Callback for switching panel.	(activeKeys: Array): void	-
accordion	Accordion mode.	Boolean	false
collapseKey	Uniquely identifying the collapse and corresponding collapse-item.	String	false

Collapse-item

Property	Description	Type	Default
itemKey	Corresponding activeKey.	String	Unique component identifier
header	Header content of the panel.	String	-
collapseKey	Uniquely identifying the collapse and corresponding collapse-item.	String	false

When a page has multiple collapse components, the collapseKey attribute of the collapse and the corresponding collapse-item must be mandatory and equal. When a page has just one collapse component, the collapseKey is not mandatory.