Accordion 折叠面板
把次要的内容收起来，只留标题，按需展开：常见问题、高级设置、长表单的分段。内容都很重要、需要一眼看全时不要折叠。
基本用法
默认各项互不影响（multiple），可以同时展开多项。高度用无过冲的 soft 弹簧展开，箭头转 90°，内容稍后淡入。
购买后 14 天内可以无理由全额退款，款项会在 3 到 5 个工作日内原路退回。
在“账单”里随时加购席位，按当月剩余天数折算费用，立即生效。
可以。项目、任务和评论都能导出成 CSV 或 JSON，附件会打包成一个压缩文件。
仅企业版提供。
一次只展开一项
type="single" 时展开一项会收起另一项。默认还可以把唯一展开的那项收起来。
购买后 14 天内可以无理由全额退款，款项会在 3 到 5 个工作日内原路退回。
在“账单”里随时加购席位，按当月剩余天数折算费用，立即生效。
可以。项目、任务和评论都能导出成 CSV 或 JSON，附件会打包成一个压缩文件。
仅企业版提供。
受控，且总有一项展开
value / onChange 受控，值是展开项的数组。single 配合 collapsible={false} 时，已展开的那项不能再收起（它的标题会标成 aria-disabled）。
购买后 14 天内可以无理由全额退款，款项会在 3 到 5 个工作日内原路退回。
在“账单”里随时加购席位，按当月剩余天数折算费用，立即生效。
可以。项目、任务和评论都能导出成 CSV 或 JSON，附件会打包成一个压缩文件。
仅企业版提供。
无底变体
variant="plain" 去掉卡片底，用来嵌进已有的卡片或面板。
购买后 14 天内可以无理由全额退款，款项会在 3 到 5 个工作日内原路退回。
在“账单”里随时加购席位，按当月剩余天数折算费用，立即生效。
可以。项目、任务和评论都能导出成 CSV 或 JSON，附件会打包成一个压缩文件。
规格
- 高度
- grid 0fr ⇄ 1fr · spring-soft 曲线 391ms
- 箭头
- rotate 90° · bouncy · 展开后变正文色
- 内容
- 延迟 40ms 淡入 160ms + 下移 8px 240ms
接口
Accordion
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
items* | AccordionItem[] | — | 各项的标题和内容。 |
type | 'single' | 'multiple' | 'multiple' | single：同时只展开一项。 |
value / defaultValue | string[] | [] | 展开的项，受控 / 非受控；single 时最多一个。 |
onChange | (value: string[]) => void | — | 展开状态变化时。 |
collapsible | boolean | true | single 时是否允许把唯一展开的一项收起。 |
headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | 标题的层级，按所在页面的标题结构选。 |
variant | 'group' | 'plain' | 'group' | group：带卡片底的分组；plain：没有底。 |
AccordionItem
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value* | string | — | 唯一标识。 |
title* | ReactNode | — | 标题。 |
content* | ReactNode | — | 展开后的内容。 |
disabled | boolean | — | 禁用，不能展开。 |
无障碍
- 每一项的标题是标题元素（默认
h3）里的一个按钮，带aria-expanded和aria-controls；内容区是role="region"，用标题命名。 - Tab 在标题之间移动，Enter 或 Space 展开 / 收起。
- ↑ ↓ 在标题间循环移动，Home End 到第一个 / 最后一个；禁用的项会被跳过。
- 收起的内容不可见，里面的控件不在 Tab 顺序里，读屏也读不到。
- 箭头是装饰；展开与否由 aria-expanded 告诉读屏。