Collapse

2024-05-31 10:14

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.