使用场景
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 具有
id
props,传入的值会被设置为 wrapper 元素的id, 可以配合其他组件的aria-controls
指明控制关系, 见下方使用示例。
FAQ
- 为什么使用 Collapsible 没有正常展开?
检查 Collapsible 父级是否设置 display:none,此时因为无法拿到节点高度,会出现无法展开的问题。如果没有设置,可以联系 Semi 客服看是否存在其他问题。