全部产品
云市场
云游戏

折叠面板(collapse)

更新时间:2020-03-26 14:30:55

本文介绍折叠面板(collapse)。

collapse

属性名 描述 类型 默认值 必选
activeKey 当前激活 tab 面板的 key Array / String 默认无,accordion 模式下默认第一个元素 false
onChange 切换面板的回调 (activeKeys: Array): void - false
accordion 手风琴模式 Boolean false false
collapseKey 唯一标示 collapse 和对应的 collapse-item String false false

collapse-item

属性名 描述 类型 默认值 必选
itemKey 对应 activeKey String 组件唯一标识 false
header 面板头内容 String false
collapseKey 唯一标示 collapse 和对应的 collapse-item String false false

当 Page 中存在多个 collapse 组件时,collapse 和对应的 collapse-item 的 collapseKey 属性为必选值并且必须相等,当 Page 中只有一个 collapse 组件时,collapseKey 不需要提供。

代码示例

  1. {
  2. "defaultTitle": "小程序AntUI组件库",
  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">基础用法</view>
  3. <collapse
  4. className="demo-collapse"
  5. collapseKey="collapse1"
  6. activeKey="{{['item-11', 'item-13']}}"
  7. onChange="onChange"
  8. >
  9. <collapse-item header="标题1" itemKey="item-11" collapseKey="collapse1">
  10. <view class="item-content content1">
  11. <view>内容区域</view>
  12. </view>
  13. </collapse-item>
  14. <collapse-item header="标题2" itemKey="item-12" collapseKey="collapse1">
  15. <view class="item-content content2">
  16. <view>内容区域</view>
  17. </view>
  18. </collapse-item>
  19. <collapse-item header="标题3" itemKey="item-13" collapseKey="collapse1">
  20. <view class="item-content content3">
  21. <view>内容区域</view>
  22. </view>
  23. </collapse-item>
  24. </collapse>
  25. <view class="demo-title">手风琴模式</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="标题1" itemKey="item-21" collapseKey="collapse2">
  34. <view class="item-content content1">
  35. <view>内容区域</view>
  36. </view>
  37. </collapse-item>
  38. <collapse-item header="标题2" itemKey="item-22" collapseKey="collapse2">
  39. <view class="item-content content2">
  40. <view>内容区域</view>
  41. </view>
  42. </collapse-item>
  43. <collapse-item header="标题3" itemKey="item-23" collapseKey="collapse2">
  44. <view class="item-content content3">
  45. <view>内容区域</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({});