# 折叠面板

编辑 Fumadocs 和 Prosefly MDX 文档中的可展开内容与常见问题面板。

import ContentEditor from '@/components/editor/ContentEditor.astro';

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

## 支持的配置

同一个编辑器支持 [Astro](/zh-cn/frameworks/astro/)、[Starlight](/zh-cn/frameworks/starlight/)、[Fumadocs](/zh-cn/frameworks/fumadocs/) 和 [Prosefly](/zh-cn/frameworks/lotus/) 配置。选择与你的网站匹配的配置，即可查看该集成支持的组件语法和编辑控件。

## 可视化编辑

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

<ContentEditor content="accordion" />

## 源码示例

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

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

## 配置差异

| 配置      | 分组与单项组件                                                                      |
| --------- | ----------------------------------------------------------------------------------- |
| Fumadocs  | Accordions 和 Accordion；分组通过 `type="single"` 或 `type="multiple"` 设置展开方式 |
| Prosefly  | Accordions 和 AccordionItem；分组使用 `multiple` 属性                               |
| Starlight | 没有专门的 Accordion 配置组件                                                       |

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

## Starlight Details

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

<ContentEditor content="details" id="editor-component-accordion-details" />

## 源码示例

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

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

</details>
```

## 相关 MDX 指南

继续阅读：[提示块](/docs/zh-cn/editor/components/callout/) · [标签页](/docs/zh-cn/editor/components/tabs/) · [步骤](/docs/zh-cn/editor/components/steps/).