展示类 · Collapsible
折叠
行为组件，是一个用于展开或折叠内容的容器。

使用场景

  • Collapsible 是一个行为组件，默认开启动画效果。它被用于 Semi 的各种组件中，如：Navigation， Collapse, Tree， TreeSelect，以及 Typography 中。
  • 当上述组件不能满足需求或者需要自定义一些折叠行为时，可以使用 Collapsible 来包裹需要展开或者折叠的内容。

代码演示

如何引入

基本用法

通过 isOpen 来控制内容的展开或者折叠。

自定义动画时间

通过 duration 设置动画展开或者折叠的时间，也可以通过 motion 来关闭动画。

嵌套使用

自定义折叠高度

可以使用 collapseHeight 自定义收起的高度，需要版本 v>=1.0.0

API 参考

属性说明类型默认值版本
className类名string-0.34.0
collapseHeight折叠高度number01.0.0
duration动画执行的时间number250-
fade是否开启淡入淡出booleanfalse2.21.0
isOpen是否展开内容区域booleanfalse-
keepDOM是否保留隐藏的面板 DOM 树，默认销毁booleanfalse0.25.0
motion是否开启动画booleantrue-
reCalcKey当 reCalcKey 改变时，将重新计算子节点的高度，用于优化动态渲染时的计算number | string-1.5.0
style样式CSSProperties-0.34.0
ididhtml id string type-2.3.0

Accessibility

ARIA

  • Collapsible 具有 id props，传入的值会被设置为 wrapper 元素的id, 可以配合其他组件的 aria-controls 指明控制关系, 见下方使用示例。

FAQ

  • 为什么使用 Collapsible 没有正常展开?
    检查 Collapsible 父级是否设置 display:none，此时因为无法拿到节点高度，会出现无法展开的问题。如果没有设置，可以联系 Semi 客服看是否存在其他问题。