Accordion 手风琴
在纵向列表中按标题展开或收起多组相关的详细内容。
使用概览
适合使用
- 常见问题或设置分组较多，用户通常只需查看其中几项时。
不建议使用
- 所有内容都很短且同时可见更利于比较与理解时。
真实示例
常见问题折叠组
按问题标题展开对应的答案内容。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/accordion.json基础用法
导入
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@richardqiu/quartz/accordion";JSX
<Accordion type="single" collapsible><AccordionItem value="billing"><AccordionTrigger>如何开具发票？</AccordionTrigger><AccordionContent>在订单详情中提交发票信息。</AccordionContent></AccordionItem></Accordion>状态与控制摘要
默认
键盘焦点可见
已禁用
已打开
已关闭
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
type | "single" | "multiple" | "single" | 决定同一时间允许展开一个还是多个项目。 |
collapsible | boolean | false | 允许单选模式下再次关闭当前展开项目。 |
组合结构
- 01
Accordion - 02
AccordionItem - 03
AccordionTrigger - 04
AccordionContent
键盘约定
- Enter 或空格键展开当前项；方向键、Home 与 End 在可用触发器间移动。
可访问性契约
- 触发器与内容区域保持关联，并保留标题和按钮语义。
- 关闭内容会离开可访问性树；减少或关闭动效时直接显示最终高度。