Accordion

折叠卡片 — 带有箭头和标题行，点击展开显示内容。多个组合可渲染为一个带边框的卡片。

安装

npx @cloudflare/nimbus-docs add accordion

yarn dlx @cloudflare/nimbus-docs add accordion

pnpm dlx @cloudflare/nimbus-docs add accordion

bunx @cloudflare/nimbus-docs add accordion

预览

一个文档框架，组件会复制到你的仓库中，页面会为智能体提供 markdown 替代版本。

运行 nimbus-docs add <slug> — 组件及其注册依赖会被复制到 src/components/ui/。

可以 — 它们就在你的仓库中。你可以自由编辑 Tailwind 类名、布局或属性，不用担心破坏上游 API。

<AccordionGroup>
<Accordion>
  <AccordionTrigger>什么是 Nimbus？</AccordionTrigger>
  <AccordionContent>
    一个文档框架，组件会复制到你的仓库中，页面会为智能体提供 markdown 替代版本。
  </AccordionContent>
</Accordion>
<Accordion>
  <AccordionTrigger>如何安装组件？</AccordionTrigger>
  <AccordionContent>
    运行 `nimbus-docs add <slug>` — 组件及其注册依赖会被复制到 `src/components/ui/`。
  </AccordionContent>
</Accordion>
<Accordion>
  <AccordionTrigger>我可以编辑组件吗？</AccordionTrigger>
  <AccordionContent>
    可以 — 它们就在你的仓库中。你可以自由编辑 Tailwind 类名、布局或属性，不用担心破坏上游 API。
  </AccordionContent>
</Accordion>
</AccordionGroup>

示例

独立使用

单个独立的手风琴 — 当折叠内容不属于列表时很有用。

智能体可以读取 .md 文件而无需解析 HTML 外壳。src/content/docs/ 中的每个页面都会自动生成一个。

<Accordion>
<AccordionTrigger>为什么 Nimbus 提供 markdown 替代版本？</AccordionTrigger>
<AccordionContent>
  智能体可以读取 .md 文件而无需解析 HTML 外壳。`src/content/docs/` 中的每个页面都会自动生成一个。
</AccordionContent>
</Accordion>

默认展开

在手风琴上设置 open 属性可使其默认展开。

当第一个条目包含最重要的答案时很有用。

<Accordion open>
<AccordionTrigger>默认展开</AccordionTrigger>
<AccordionContent>
  当第一个条目包含最重要的答案时很有用。
</AccordionContent>
</Accordion>

API 参考

组件接受的全部属性，均源自单一声明。

Prop	Type
`open`	`boolean`