折叠面板

使用 Prosefly 的 MDX 组件编辑器编辑可展开区域和常见问题，同时保留 Fumadocs 或 Prosefly 的组件语法。

支持的配置

同一个编辑器支持 Astro、Starlight、Fumadocs 和 Prosefly 配置。选择与你的网站匹配的配置，即可查看该集成支持的组件语法和编辑控件。

可视化编辑

展开面板后编辑正文，在组件中修改标题。通过分组的添加操作创建新面板，通过单项控件移动或删除面板。分组和单项可编辑的属性取决于当前配置。

accordion.mdx

FumadocsProsefly

可视化源码

重置示例

正在加载编辑器…

这是一个可编辑的示例，修改仅保留在当前页面。

源码示例

import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';

<Accordions type="multiple">
  <Accordion title="草稿保存在哪里？" value="drafts">
    草稿会保存在内容空间中，直到你发布它们。
  </Accordion>
  <Accordion title="可以继续使用现有网站吗？" value="site">
    现有应用和构建流程仍会负责发布后的内容。
  </Accordion>
</Accordions>

配置差异

使用 value 时，请保持各项的值唯一。编辑时展开面板，与设置发布页面的默认展开属性是两回事。Starlight 中的 HTML details 内容属于另一种形式，并非这里的 Accordion 组件。

Starlight Details

Starlight 使用原生 HTML <details> 元素表示可展开内容。如果页面只需要一个简单的可展开提示，可以使用下面的示例，而不是 Fumadocs 或 Prosefly 的 Accordion 分组。

details.mdx

Starlight

可视化源码

重置示例

正在加载编辑器…

这是一个可编辑的示例，修改仅保留在当前页面。

源码示例

<details open>
  <summary>编辑器会保留什么？</summary>

正文仍然可以在可视化模式中编辑。

</details>

相关 MDX 指南

继续阅读：提示块 · 标签页 · 步骤.