Collapse

2024-05-31 10:14

Mini-program developers can use the Collapse component to create collapsible and expandable content areas. This makes the interface cleaner and less cluttered, allowing users to selectively view or hide content. This topic covers the user experience, attribute details, and sample code for the Collapse component.

User experience

The following image shows a Collapse component with four content areas: three that are active and one that is disabled.

Attributes

Attribute	Data type	Default	Description
className	String	N/A	The class name for the component.
style	String	N/A	The style for the component.
current	Array<Number>	N/A	The indexes of the currently expanded content areas.
defaultCurrent	Array<Number>	N/A	The indexes of the default expanded content areas.
accordion	Boolean	`false`	Whether the component operates in accordion mode, where only one content area can be expanded at a time.
content	Slot	N/A	The slot for the content area. It accepts the value and index attributes.
items	Array<CollapseItem>	N/A	The collapsible content areas in the component.
title	slot	N/A	The slot for the title. It accepts the value and index attributes.
onChange	EventHandle	N/A	The callback function that is triggered when the content area is changed.

CollapseItem

Attribute	Data type	Default	Description
content	String	N/A	The content of the area.
disabled	Boolean	`false`	Whether the area is disabled for user interactions.
title	String	N/A	The title of the area.

Sample Code

The following sample code demonstrates how to create a Collapse component that is shown in User experience:

.axml

copy
<ant-collapse
  defaultCurrent="{{ [0] }}"
  items="{{ items }}"
  onChange="onChange" />

.js

copy
Page({
  data: {
    items: [
      {
        title: 'Item 1',
        content: 'Text for item 1...'
      },
      {
        title: 'Item 2',
        content: 'Text for item 2...'
      },
      {
        title: 'Item 3',
        content: 'Text for item 3...'
      },
      {
        title: 'Disabled item',
        disabled: true,
      }
    ]
  },
  onChange(current) {
    console.log(current);
  }
});

.json

copy
{
  "defaultTitle": "Collapse",
  "usingComponents": {
    "ant-collapse": "antd-mini/es/Collapse/index"
  }
}