All Products
Search
Document Center

Collapse

Last Updated: Feb 04, 2021

This section describes collapse, the collapsible panel.

collapse

Property Description Type Default value Mandatory
activeKey Key of the current active tab panel. Array / String There is no key by default. In accordion mode, the first element is used by default. false
onChange Callback when a panel switchover occurs. (activeKeys: Array): void - false
accordion Accordion mode. Boolean false false
collapseKey Unique identifier of collapse and the corresponding collapse-item. String false false

collapse-item

Property Description Type Default value Mandatory
itemKey Corresponding to activeKey. String Unique identifier of the component. false
header Content of the panel header. String N/A false
collapseKey Unique identifier of collapse and the corresponding collapse-item. String false false

If multiple collapse components exist on the page, the collapseKey property of collapse and the corresponding collapse-item are mandatory and must be the same. If only one collapse component exists on the page, collapseKey does not need to be provided.

Sample code

 
  1. {
  2. "defaultTitle": "AntUI component library of the Mini Program",
  3. "usingComponents": {
  4. "collapse": "mini-antui/es/collapse/index",
  5. "collapse-item": "mini-antui/es/collapse/collapse-item/index"
  6. }
  7. }
 
  1. <view>
  2. <view class="demo-title">Basic usage</view>
  3. <collapse
  4. className="demo-collapse"
  5. collapseKey="collapse1"
  6. activeKey="{{['item-11', 'item-13']}}"
  7. onChange="onChange"
  8. >
  9. <collapse-item header="Title 1" itemKey="item-11" collapseKey="collapse1">
  10. <view class="item-content content1">
  11. <view>Content area</view>
  12. </view>
  13. </collapse-item>
  14. <collapse-item header="Title 2" itemKey="item-12" collapseKey="collapse1">
  15. <view class="item-content content2">
  16. <view>Content area</view>
  17. </view>
  18. </collapse-item>
  19. <collapse-item header="Title 3" itemKey="item-13" collapseKey="collapse1">
  20. <view class="item-content content3">
  21. <view>Content area</view>
  22. </view>
  23. </collapse-item>
  24. </collapse>
  25. <view class="demo-title">Accordion mode</view>
  26. <collapse
  27. className="demo-collapse"
  28. collapseKey="collapse2"
  29. activeKey="{{['item-21', 'item-23']}}"
  30. onChange="onChange"
  31. accordion="{{true}}"
  32. >
  33. <collapse-item header="Title 1" itemKey="item-21" collapseKey="collapse2">
  34. <view class="item-content content1">
  35. <view>Content area</view>
  36. </view>
  37. </collapse-item>
  38. <collapse-item header="Title 2" itemKey="item-22" collapseKey="collapse2">
  39. <view class="item-content content2">
  40. <view>Content area</view>
  41. </view>
  42. </collapse-item>
  43. <collapse-item header="Title3" itemKey="item-23" collapseKey="collapse2">
  44. <view class="item-content content3">
  45. <view>Content area</view>
  46. </view>
  47. </collapse-item>
  48. </collapse>
  49. </view>
 
  1. .item-content {
  2. padding: 14px 16px;
  3. font-size: 17px;
  4. color: #333;
  5. line-height: 24px;
  6. }
  7. .content1 {
  8. height: 200px;
  9. }
  10. .content2 {
  11. height: 50px;
  12. }
  13. .content3 {
  14. height: 100px;
  15. }
  16. .demo-title {
  17. padding: 14px 16px;
  18. color: #999;
  19. }
  20. .demo-collapse {
  21. border-bottom: 1px solid #eee;
  22. }
 
  1. Page({});