Collapse

Properties

Collapse

Property	Type	Required	Default value	Description
name	string[]	No	[]	Active index
accordion	boolean	No	-	Enables accordion mode, where only one panel can be expanded at a time.
uid	string	No	-	Required when multiple Collapse components exist on a page. Must be unique on the page and match the uid of the inner CollapseItem components.
className	string	No	-	The class name.

CollapseItem

Property	Type	Required	Default value	Description
title	string	No	-	The content of the title bar.
name	string	Yes	-	A unique identifier.
uid	string	No	-	Required when a page contains multiple Collapse components. Must be unique on the page and match the uid of the external CollapseItem component.
className	string	No	-	The class name.

Events

Collapse

Event name	Description	Type
onChange	Triggered when a panel is expanded or collapsed. Returns the currently expanded panels.	( value : string[]) => void

Slots

Slot name	Description
title	Title slot for CollapseItem. Does not take effect if the title property is set.

Style classes

Collapse

Class name	Description
amd-avatar	The overall style.
amd-avatar-src	The image style.
amd-avatar-content	The style for the profile picture description.
amd-avatar-name	The style for the name.
amd-avatar-desc	The style for the description.

CollapseItem

Class name	Description
amd-avatar	The overall style.
amd-avatar-src	The image style.
amd-avatar-content	The style for the profile picture description.
amd-avatar-name	The style for the name.
amd-avatar-desc	The style for the description.

Code examples

Basic usage

The following code is an example of index.axml:

<view>
  <demo-block title="Basic Usage" padding="0">
    <collapse 
      name="{{['item-0']}}" 
      onChange="onChange" 
      uid="collapse-0" 
      accordion="{{false}}">
      <collapse-item 
        title="Item 1" 
        uid="collapse-0" 
        name="item-0">
        Pariatur dolore commodo commodo elit adipisicing sunt adipisicing ex duis labore nisi sunt. Magna ut minim deserunt. Sunt velit occaecat incididunt aliqua. Dolore officia voluptate aute reprehenderit anim excepteur elit.
      </collapse-item>
      
      <collapse-item 
        name="item-1" 
        title="Item 2" 
        uid="collapse-0">
        Dolor reprehenderit cillum aliqua qui id Lorem elit anim do minim mollit. Commodo id cupidatat est tempor anim. Fugiat ipsum dolor nostrud officia mollit. Aliquip aliqua pariatur tempor excepteur commodo non et adipisicing magna ex nostrud dolore cillum exercitation enim. In sunt velit laboris ullamco et in reprehenderit sit excepteur aute in dolor. Sunt minim incididunt consectetur laborum sint fugiat voluptate sunt culpa fugiat duis. Ad consectetur ad aliquip aute labore magna commodo est cupidatat.
      </collapse-item>
    
      <collapse-item 
        title="Item 3" 
        name="item-2" 
        uid="collapse-0">
        Ad ut ullamco exercitation do excepteur ipsum ipsum consectetur nulla fugiat est et. Occaecat ullamco nulla mollit cupidatat dolore nulla minim cillum proident laboris mollit. Veniam consectetur esse consectetur. Fugiat in laborum anim.
      </collapse-item>
      
    </collapse>
  </demo-block>
  <demo-block title="Accordion Mode"  padding="0">
    <collapse 
      name="{{['item-0']}}" 
      onChange="onChange" 
      uid="collapse-1" 
      accordion>
      <collapse-item 
        title="Item 1" 
        uid="collapse-1" 
        name="item-0">
        In accordion mode, only one item can be expanded at a time.
      </collapse-item>
      
      <collapse-item 
        name="item-1" 
        title="Item 2" 
        uid="collapse-1">
        In accordion mode, only one item can be expanded at a time.
      </collapse-item>
    
      <collapse-item 
        title="Item 3" 
        name="item-2" 
        uid="collapse-1">
        In accordion mode, only one item can be expanded at a time.
      </collapse-item>
    </collapse>
  </demo-block>

</view>

The following code is an example of index.js:

Page({
  data: {
   
  },
});

The following code is an example of index.json:

{
  "defaultTitle": "Collapse",
  "usingComponents": {
    "collapse": "antd-mini/es/Collapse/index",
    "collapse-item": "antd-mini/es/Collapse/CollapseItem/index",
    "icon": "antd-mini/es/Icon/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}

Custom mode

The following code is an example of index.axml:

<view>
  <demo-block title="Disabled State" padding="0">
    <collapse 
      className="demo-collapse" 
      uid="collapse-1" 
      accordion="{{false}}">
      <collapse-item 
        title="Item 1" 
        uid="collapse-1" 
        name="item-0">
        This is the content of the first item.
      </collapse-item>
      
      <collapse-item 
        name="item-1" 
        uid="collapse-1"
        disabled="{{true}}"
        title="Item 2">
        This is the content of the second item.
      </collapse-item>

      <collapse-item 
        name="item-2" 
        uid="collapse-1"
        disabled="{{true}}"
        title="Item 2">
        This is the content of the third item.
      </collapse-item>
    </collapse>
  </demo-block>
  <demo-block title="Custom Icons" padding="0">
    <collapse 
      className="demo-collapse" 
      uid="collapse-2" 
      accordion="{{false}}">
      <collapse-item 
        uid="collapse-2" 
        name="item-0">
        <view slot="title">
          <icon type="FireFill" size="small"/>
          <text style="color: red; padding-left:12px">title slot</text>
        </view>
        Custom icon
      </collapse-item>
      
      <collapse-item 
        name="item-1" 
        uid="collapse-2"
        expandIcon="AddOutline"
        closeIcon="MinusOutline"
        brief="Helper text">
        <view slot="title">
          <text style="color: red; padding-right:8px">title slot</text>
          <icon type="FireFill" size="small"/>
        </view>
        Custom icon
      </collapse-item>
    </collapse>
  </demo-block>
  <demo-block title="Controlled Mode" padding="0">
    <collapse 
      className="demo-collapse" 
      name="{{name}}" 
      onChange="handleChange" 
      uid="collapse-0" 
      accordion="{{false}}">
      <collapse-item 
        title="Automatic Height" 
        uid="collapse-0" 
        name="item-0">
        <view class="item-content">
          <view>Content area</view>
        </view>
      </collapse-item>
      
      <collapse-item 
        name="item-1" 
        uid="collapse-0">
        <view slot="title">
          <text style="color: red;">title slot</text>
        </view>
        <view class="item-content content2">
          <view>Content area</view>
        </view>
      </collapse-item>
    
      <collapse-item 
        title="Title" 
        name="item-2" 
        uid="collapse-0">
        <view class="item-content content3">
          <view>Content area</view>
        </view>
      </collapse-item>
      
      <collapse-item 
        title="Title" 
        name="item-3" 
        uid="collapse-0">
        <view class="item-content content3">
          <view>Content area</view>
        </view>
      </collapse-item>
    </collapse>
    <button onTap="handleControl">Expand a random item</button>
  </demo-block>
</view>

The following code is an example of index.js:

Page({
  data: {
    name: ['item-1'],
  },
  handleChange(e) {
    this.setData({ name: e });
    console.log(e);
  },
  handleControl() {
    const getRandom = () => {
      const random = Math.random();
      return random < 0.25 ? 0 : random < 0.5 ? 1 : random < 0.75 ? 2 : 3;
    };
    const { name } = this.data;
    let newName = [];
    if (name.length === 1) {
      let randonIndex;
      // eslint-disable-next-line no-constant-condition
      while (true) {
        randonIndex = getRandom();
        if (randonIndex !== Number(name[0].substring(5))) {
          break;
        }
      }
      newName = [`item-${randonIndex}`];
    } else {
      newName = [`item-${getRandom()}`];
    }
    this.setData({
      name: newName,
    });
  },
});

The following code is an example of index.acss:

.item-content {
  font-size: 34rpx;
  color: #333;
  line-height: 48rpx;
  background-color: white;
}
.amd-icon {
  font-size: 22px;
}

The following code is an example of index.json:

{
  "defaultTitle": "Collapse: Custom",
  "usingComponents": {
    "collapse": "antd-mini/es/Collapse/index",
    "collapse-item": "antd-mini/es/Collapse/CollapseItem/index",
    "icon": "antd-mini/es/Icon/index",
    "demo-block": "../../components/DemoBlock/index",
    "button": "antd-mini/es/Button/index"
  }
}