shadcn_ui-accordion

用途

Shadcn UI Accordion 用于构建垂直堆叠的可折叠面板（手风琴），每个标题都可以展开或收起以显示其对应内容。适用于添加可展开区块、FAQ 常见问题列表，或其它需要纵向折叠展示信息的界面场景。

主要能力

• 通过 ShadAccordion 渲染一组垂直堆叠的标题，每个标题可展开显示内容。
• 每个条目由 ShadAccordionItem 表示，包含 value、title 和 child：value 用于标识该条目，title 为标题，child 为展开后显示的内容。
• 支持单开模式：默认情况下同一时间只展开一个条目。
• 支持多开模式：使用 ShadAccordion.multiple 可允许同时展开多个条目。
• 资料说明该组件遵循 WAI-ARIA 设计模式，默认样式与其它组件的美学风格一致，并默认带有动画效果。

使用方式

资料给出的 Dart 示例中，先定义一个由带命名字段的记录组成的数据列表，每条记录包含 title 与 content。然后将其映射为 ShadAccordionItem 列表，其中 value 设为该条记录，title 为 Text(detail.title)，child 为 Text(detail.content)，外层包裹 ShadAccordion。

单开模式示例：

final details = [
  (title: 'Is it acceptable?', content: 'Yes. It adheres to the WAI-ARIA design pattern.'),
  (title: 'Is it styled?', content: "Yes. It comes with default styles that matches the other components' aesthetic."),
  (title: 'Is it animated?', content: "Yes. It's animated by default, but you can disable it if you prefer."),
];

ShadAccordion<({String content, String title})>(
  children: details.map(
    (detail) => ShadAccordionItem(
      value: detail,
      title: Text(detail.title),
      child: Text(detail.content),
    ),
  ),
)

多开模式：使用 ShadAccordion.multiple，其余写法与单开模式一致。

ShadAccordion<({String content, String title})>.multiple(
  children: details.map(
    (detail) => ShadAccordionItem(
      value: detail,
      title: Text(detail.title),
      child: Text(detail.content),
    ),
  ),
)

适用场景

• FAQ 常见问题列表。
• 需要可展开区块的页面。
• 其它需要纵向折叠展示内容的界面。

限制

资料提到组件默认带有动画效果，但可根据偏好关闭。除上述内容外，关于安装命令、依赖版本、收费与价格、平台支持等信息，资料中暂未提供。