Accordion

将相关内容组织为可展开、收起的分组，适合常见问题、设置和分段说明，支持单项或多项同时展开。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

适合 FAQ、设置分组和可折叠说明。需要切换同一区域的内容面板时使用 Tab；AccordionItem 应放在 Accordion 中。

type="single" 使用字符串值，multiple 使用数组；bind:value 同步展开项，defaultValue 只提供初始状态。
items 模式使用索引字符串作为值，内置标题默认单行缩略并保留全文名称；parts.Text 配置该标题文字。显式 children 替换 items，子项自行配置，不读取默认子项的 parts。
Accordion 内的 Icon as="leading" 在未显式指定 size 时继承 Accordion 图标尺寸：sm/md/lg 分别为 16/20/24；未声明 leading 的 Icon 不参与这项继承，显式 size 优先。

导入

import { Accordion } from '@snowui-design-system/components';

用法

小尺寸

中尺寸

大尺寸

填充变体

分隔变体

API 参考

属性	类型	默认值	示例	描述
`type`	`AccordionType`	`"single"`	`type={value}`	single 一次只展开一项；multiple 可同时展开多项。决定 value/defaultValue 与 onValueChange 的值形态。
`value`	`AccordionValue`	`—`	`value={value}`	当前展开值，支持 bind:value；优先于内部状态。single 使用字符串，multiple 使用数组；single 空字符串表示全部收起。
`defaultValue`	`AccordionValue`	`—`	`defaultValue={value}`	非受控初始展开值；仅初始化内部状态时读取，value 优先。items 模式使用索引字符串，显式 AccordionItem 使用其 value。
`collapsible`	`boolean`	`true`	`collapsible`	单开模式下，点击已展开项是否允许收起。
`variant`	`AccordionVariant`	`"filled"`	`variant={value}`	filled 为带背景的独立折叠项；divided 使用项间分割线。两者共享展开状态与交互。
`size`	`AccordionSize`	`—`	`size={value}`	尺寸密度；显式值优先，其次父级尺寸上下文，再回退 md。统一控制标题、正文、间距及子项尺寸。
`disabled`	`boolean`	`false`	`disabled`	禁用整个 Accordion。
`continuousHover`	`boolean`	`false`	`continuousHover`	已弃用，仅保留调用兼容；任意值均不再显示 hover 背景。
`indicatorVariant`	`"cross" \| "minus"`	`"cross"`	`indicatorVariant="cross"`	cross 使用同一个加号旋转 45° 成为 ×；minus 保留加号/减号切换与半圈旋转。自定义 trailing 替换默认图标。
`role`	`string`	`"presentation"`	`role="Example"`	根容器的 ARIA role；默认仅作展示分组，标题触发器与内容 region 的语义仍由 AccordionItem 管理。
`items`	`AccordionEntry[]`	`[]`	`items={items}`	默认内置模式的数据；内部 value 使用数组索引字符串。
`children`	`Snippet`	`—`	`<Accordion>Content</Accordion>`	显式组合内容；存在时替换内置 items。
`parts`	`ComponentPartsOf<{ AccordionItem: typeof AccordionItem; Frame: typeof Frame; Text: typeof Text; }>`	`—`	`parts={partsOptions}`	仅配置 items 模式内建的 AccordionItem、标题／正文 Frame 和标题 Text；显式 children 不读取这些默认子项配置。
`onValueChange`	`(value: AccordionValue) => void`	`—`	`onValueChange={(value) => { /* handle value */ }}`	用户切换展开项后回调；single 返回当前项字符串（全部收起时为空字符串），multiple 返回展开项数组。可配合 bind:value 同步页面状态。