手风琴折叠组展示

它把多段内容收在各自标题下面,用户点击标题后展开或收起对应内容。

  • 点一个标题展开内容再点就收起
  • 一排问题点开才看答案的东西
  • 几块内容一次只展开一块
  • 折叠面板组
  • 伸缩列表
  • 可展开分组

示例

WebDisclosure Group原生支持
iOS手风琴折叠组需自己实现
AndroidAccordion需自己实现

Web / iOS / Android 对照

Web原生支持

支持 details name 分组的现代浏览器

Disclosure Group

也叫 Accordion · Exclusive Disclosure Group

多个 <details name="…">

原生 details 可直接展开收起;相同 name 可限制为同时只展开一项。键盘和视觉细节仍需测试。

iOS需自己实现

iOS / iPadOS

iOS 没有独立的手风琴容器,系统只提供单个 Disclosure Group 这一层原语。

通常怎么做:并列多个 DisclosureGroup,由应用自行协调展开状态。

Android需自己实现

Android 手机 / 平板

Accordion

也叫 Expansion Panel

通用 Material 3 没有 Accordion 或 Expansion Panel 组件,需要用列表、按钮和展开动画组合。

通常怎么做:标题用可点击行并暴露展开状态,内容用 AnimatedVisibility;保持焦点顺序不跳动。

使用规范

什么时候用

  • 内容可以按主题分段,用户通常只需阅读其中少数部分

什么时候别用

  • 内容很短可以一次读完,或用户必须同时比较多个分组

容易混淆

给 AI 的提示词

这条词条还没有经过验证的实现提示词。