Accordion

手风琴（Accordion）将大段内容分组为可折叠的面板，让用户按需展开感兴趣的部分，适合在有限空间内组织层级信息。

import {
  Accordion,
  AccordionRoot,
  AccordionItem,
  AccordionHeader,
  AccordionTrigger,
  AccordionContent
} from '@skyroc/web-ui';

何时使用

• 页面信息量较大，需要分组折叠展示时（如 FAQ、设置面板）。
• 用户只需关注部分内容，无需一次性浏览全部信息。
• 相比 Tab 组件，Accordion 更适合各分组内容长度差异较大的场景。

单选模式

设置 type="single" 时，同一时间只能展开一个面板。默认展开后不可再折叠（始终保持一个面板打开）。

可折叠

在单选模式下，设置 collapsible 允许用户折叠所有面板（点击已展开的面板可将其收起）。

多选模式

设置 type="multiple" 时，可以同时展开多个面板，彼此互不影响。

尺寸

通过 size 调整手风琴的字号与间距，从 xs 到 2xl 共 6 个尺寸。

插槽

每个条目支持 leading 和 trailing 插槽，可在标题前后放置图标、标签或其他内容。插槽通过 items 数据中的 leading / trailing 字段配置。

自定义图标

通过 triggerIcon 替换默认的展开/折叠箭头图标，triggerLeading 和 triggerTrailing 可以在所有触发器前后统一添加内容。

自定义样式

通过 classNames 对手风琴的各个 slot（root、item、header、trigger、content、triggerIcon、triggerLeadingIcon）分别自定义样式。

API

Accordion

通用属性参考：基于 Radix UI Accordion，支持原生 div 元素的所有属性。

AccordionItemData

每个条目的数据结构，通过 items 数组传入：

类型