Collapse 设计文档
折叠面板，可展开或折叠展示内容区域。用 <Collapse.Panel itemKey header> 声明面板，支持受控 activeKey、accordion 手风琴、clickHeaderToExpand、自定义 expandIcon/collapseIcon、keepDOM/lazyRender、展开动画。DOM/API/tokens 对齐 Semi。
← API 文档使用建议
折叠面板，可展开或折叠展示内容区域。用 <Collapse.Panel itemKey header> 声明面板，支持受控 activeKey、accordion 手风琴、clickHeaderToExpand、自定义 expandIcon/collapseIcon、keepDOM/lazyRender、展开动画。DOM/API/tokens 对齐 Semi。
Accessibility
ARIA role：button
- 面板 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) | 分割线颜色 |
显示第 1 条-第 7 条，共 7 条
- 1