使用场景
Collapsible是一个行为组件，默认开启动画效果。它被用于 Semi 的各种组件中，如：Navigation，Collapse,Tree，TreeSelect，以及Typography中。- 当上述组件不能满足需求或者需要自定义一些折叠行为时，可以使用
Collapsible来包裹需要展开或者折叠的内容。
代码演示
如何引入
基本用法
通过
isOpen 来控制内容的展开或者折叠。自定义动画时间
通过
duration 设置动画展开或者折叠的时间，也可以通过 motion 来关闭动画。嵌套使用
自定义折叠高度
可以使用 collapseHeight 自定义收起的高度，需要版本 v>=1.0.0
API 参考
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| className | 类名 | string | - | 0.34.0 |
| collapseHeight | 折叠高度 | number | 0 | 1.0.0 |
| duration | 动画执行的时间 | number | 250 | - |
| isOpen | 是否展开内容区域 | boolean | false | - |
| keepDOM | 是否保留隐藏的面板 DOM 树，默认销毁 | boolean | false | 0.25.0 |
| motion | 是否开启动画 | Motion | true | - |
| reCalcKey | 当 reCalcKey 改变时，将重新计算子节点的高度，用于优化动态渲染时的计算 | number | string | - | 1.5.0 |
| style | 样式 | CSSProperties | - | 0.34.0 |
| id | id | html id string type | - | 2.3.0 |
Accessibility
ARIA
- Collapsible 具有
idprops，传入的值会被设置为 wrapper 元素的id, 可以配合其他组件的aria-controls指明控制关系, 见下方使用示例。
FAQ
- 为什么使用 Collapsible 没有正常展开?
检查 Collapsible 父级是否设置 display:none，此时因为无法拿到节点高度，会出现无法展开的问题。如果没有设置，可以联系 Semi 客服看是否存在其他问题。
