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

使用场景

  • Collapsible 是一个行为组件,默认开启动画效果。它被用于 Semi 的各种组件中,如:NavigationCollapse, TreeTreeSelect,以及 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
lazyRender配合 keepDOM 使用,为 true 时挂载时不会渲染组件booleanfalse2.54.0
motion是否开启动画booleantrue-
onMotionEnd动画结束的回调() => void--
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 客服看是否存在其他问题。