Collapse
折叠面板，可展开或折叠展示内容区域。用 <Collapse.Panel itemKey header> 声明面板，支持受控 activeKey、accordion 手风琴、clickHeaderToExpand、自定义 expandIcon/collapseIcon、keepDOM/lazyRender、展开动画。DOM/API/tokens 对齐 Semi。
如何引入
import { Collapse, Collapse.Panel } from '@chenzy-design/svelte';基本用法
同时展开多个面板，可通过 defaultActiveKey 设置默认展开项。
手风琴效果
设置 accordion 后每次只允许展开一个面板，常用于 FAQ 场景。
Hi, bytedance dance dance. This is the docsite of chenzy-design.
禁用面板
通过 disabled 禁用面板，禁用项不可展开/收起。
隐藏展开/收起图标
通过 showArrow={false} 隐藏单个面板的展开/收起箭头。
自定义展开图标
通过 expandIcon（收起态）与 collapseIcon（展开态）自定义两个图标。
右上角辅助内容
通过 extra 设置右上角辅助内容，仅在 header 为字符串时生效。
箭头位置
通过 expandIconPosition 将展开箭头放到左侧（默认右侧）。
Hi, bytedance dance dance. This is the docsite of chenzy-design.
仅点击箭头展开
clickHeaderToExpand={false} 时 Header 不再是热区，仅点击箭头才切换，便于在 Header 内放置交互元素。
API 参考
Collapse
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
accordion | 手风琴模式，每次只允许展开一个面板 | boolean | false |
activeKey | 受控属性，当前展开的面板 key（仅 onChange 不回写） | string|string[] | undefined |
class | 样式类名 | string | undefined |
clickHeaderToExpand | 点击 Header 展开收起，否则只响应点击箭头 | boolean | true |
collapseIcon | 自定义折叠图标（展开态显示） | Snippet | IconChevronUp |
defaultActiveKey | 初始化选中面板的 key | string|string[] | undefined |
expandIcon | 自定义展开图标（收起态显示） | Snippet | IconChevronDown |
expandIconPosition | 展开图标位置 | 'left'|'right' | right |
keepDOM | 是否保留隐藏的面板 DOM 树，默认销毁 | boolean | false |
lazyRender | 配合 keepDOM，为 true 时挂载时不渲染内容 | boolean | false |
motion | 是否开启动画 | boolean | true |
style | 内联 CSS 样式 | string | undefined |
onChange | 切换面板的回调 | (activeKey: string[], event: MouseEvent) => void | undefined |
children | 内嵌 <Collapse.Panel> 列表 | Snippet | undefined |
Collapse.Panel
单面板，经 Object.assign(Collapse, { Panel }) 导出，父子状态用 context 传递（同 Timeline.Item / Form.Field 复合模式）。DOM 对齐 Semi collapse/item：header role=button，content 用 Collapsible 原语折叠。
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
itemKey | 必填且唯一，匹配 activeKey / defaultActiveKey | string | (required) |
header | 面板头文本（string 时渲染 header-right + extra） | string | undefined |
head | 面板头富内容插槽（ReactNode 语义，优先于 header） | Snippet | undefined |
extra | 右上角辅助内容（仅 header 为 string 且未用 head 时生效） | Snippet|string | undefined |
disabled | 面板是否被禁用 | boolean | false |
showArrow | 是否展示箭头 | boolean | true |
reCalcKey | reCalcKey 改变时重算内容高度（动态内容用） | number|string | undefined |
onMotionEnd | 动画结束回调 | () => void | undefined |
children | 面板内容 | Snippet | undefined |
Accessibility
| ARIA role | button |
| 键盘交互 | TabEnterSpace |
- 面板 header 为 role=button，aria-expanded 标记展开态
- header aria-owns 指向内容区，内容区 aria-hidden 随展开态切换
- header aria-disabled 与 disabled 属性同步
- 箭头图标 aria-hidden=true
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-color-collapse-content-text-default | var(--cd-color-text-1) | 内容文字颜色 |
--cd-color-collapse-header-bg-active | var(--cd-color-fill-1) | 菜单项背景颜色 - 按下 |
--cd-color-collapse-header-bg-hover | var(--cd-color-fill-0) | 菜单项背景颜色 - 悬浮 |
--cd-color-collapse-header-icon-default | var(--cd-color-text-2) | 展开箭头图标颜色 |
--cd-color-collapse-header-text-default | var(--cd-color-text-0) | 标题文字颜色 |
--cd-color-collapse-header-text-disabled | var(--cd-color-disabled-text) | 标题文字颜色 禁用 |
--cd-color-collapse-item-border-default | var(--cd-color-border) | 分割线颜色 |