手风琴
就地展开的分区，含分割、容器与分离样式。
就地展开的分区，含分割、容器与分离样式。
安装
npx @joyui/cli add accordion --yes应用场景
将上方预览中的 props 换成业务文案与状态即可用于表单、工具栏或设置页。
上方预览中的文案、选项与数据均可替换为业务配置；不要复制写死的演示常量到生产。
API
Accordion
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| variant | 样式。 | "divided" | "contained" | "separated" | divided · contained · separated | divided |
| defaultExpandedKeys | 默认展开。 | Key[] | — | [] |
| id (Item) | 项 id。 | Key | — | — |
| title (Item) | 标题。 | ReactNode | — | — |
| className | 合并到根节点的额外类名。 | string | — | — |
AccordionItem 数据
| 字段 | 说明 | 类型 | 必填 | 示例 |
|---|---|---|---|---|
| id | 项 id。 | string | 是 | "billing" |
| title | 标题。 | string | 是 | "如何计费？" |
| content | 内容。 | ReactNode | 是 | — |