chenzy-design

使用场景

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

import { Collapsible } from '@chenzy-design/svelte';

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

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

设置动画时间：

可以使用 collapseHeight 自定义收起的高度

以下三段为本库补充示例：Semi 有 fade / keepDOM / lazyRender 三个 API 但文档未配示例，本库各补一个便于直观对照。

fade 为 true 时，折叠/展开会叠加透明度渐变，过渡更柔和。

fade=true：折叠/展开时叠加透明度渐变，过渡更柔和。

keepDOM 为 true 时折叠后内容 DOM 不卸载，输入框内容、滚动位置等状态得以保留。

keepDOM=true：折叠后内容 DOM 不卸载，输入框内容/滚动位置得以保留。

lazyRender 配合 keepDOM 使用：首次展开前不渲染内容，节省首屏成本，首次展开后保留 DOM。

lazyRender + keepDOM：首次展开前不渲染内容（省首屏成本），首展后保留 DOM。

属性	说明	类型	默认值
children	被折叠的内容	Snippet	-
class	类名	string	-
collapseHeight	折叠高度	number	0
collapseHeightAdaptive	当内容高度小于 collapseHeight 时，是否自适应内容高度。为 true 时，收起状态高度为 `Math.min(内容高度, collapseHeight)`	boolean	false
duration	动画执行的时间	number	250
fade	是否开启淡入淡出	boolean	false
id	id	string	-
isOpen	是否展开内容区域	boolean	false
keepDOM	是否保留隐藏的面板 DOM 树，默认销毁	boolean	false
lazyRender	配合 keepDOM 使用，为 true 时挂载时不会渲染组件	boolean	false
motion	是否开启动画	boolean	true
onMotionEnd	动画结束的回调	`() => void`	-
reCalcKey	当 reCalcKey 改变时，将重新计算子节点的高度，用于优化动态渲染时的计算	`number \\| string`	-
style	样式	string	-

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

为什么使用 Collapsible 没有正常展开？

检查 Collapsible 父级是否设置 display: none，此时因为无法拿到节点高度，会出现无法展开的问题。

同理，页面处于后台标签页（document.hidden === true）时浏览器会冻结 ResizeObserver 投递，组件拿不到内容高度，isOpen 变化后 wrapper 高度会停在 0（内容 DOM 已渲染但不可见），切回前台即恢复。这不是组件问题——同页放一个裸 ResizeObserver 探针同样收不到回调。

animation

变量	默认值	用法
--cd-transition-delay-collapsible-height	var(--cd-motion-delay-none)	折叠-高度-延迟时间（组件消费，对齐 Semi $transition_delay-collapsible-height）
--cd-transition-delay-collapsible-opacity	var(--cd-motion-delay-none)	折叠-透明度-延迟时间（组件消费，对齐 Semi $transition_delay-collapsible-opacity）
--cd-transition-duration-collapsible-height	250ms	折叠-高度-动画持续时间默认值（可被 duration prop 覆盖，组件消费，对齐 Semi $transition_duration-collapsible-height）
--cd-transition-duration-collapsible-opacity	250ms	折叠-透明度-动画持续时间（组件消费，对齐 Semi $transition_duration-collapsible-opacity）
--cd-transition-function-collapsible-height	cubic-bezier(0.25, 0.1, 0.25, 1)	折叠-高度-过渡曲线（组件消费，对齐 Semi $transition_function-collapsible-height）
--cd-transition-function-collapsible-opacity	var(--cd-motion-ease-in)	折叠-透明度-过渡曲线（组件消费，对齐 Semi $transition_function-collapsible-opacity）

显示第 1 条-第 6 条，共 6 条