手风琴组件 | Fern Documentation

<Accordion> 组件可创建可展开的内容区域，内容支持搜索且符合 SEO 规范，即使在折叠状态下也可被访问。可将手风琴组件用于 FAQ、文档章节、设置面板，或任何通过渐进式展示能提升可读性的内容。

您可以使用单个手风琴，也可以使用 <AccordionGroup> 将多个手风琴组合在一起。

用法

第 1 节

第 1 节的内容，默认展开

第 2 节

第 2 节的内容

Markdown

<AccordionGroup>
  <Accordion title="第 1 节" defaultOpen={true}>
    第 1 节的内容，默认展开
  </Accordion>
  <Accordion title="第 2 节">
    第 2 节的内容
  </Accordion>
</AccordionGroup>

变体

在每个手风琴中，您都可以嵌入图片、视频和其他组件（提示框、代码块等）以呈现丰富的交互式内容。

多媒体

带多媒体的文本内容

Markdown

<Accordion title="带多媒体的文本内容">
<Frame caption="示例图片">
  <img src="https://images.pexels.com/photos/1867601/pexels-photo-1867601.jpeg" alt="示例图片" />
</Frame>
</Accordion>

嵌套组件

这里是嵌入在手风琴组件中的提示框

Markdown

<Accordion title="嵌套组件">
<Note>
  这里是嵌入在手风琴组件中的提示框
</Note>
</Accordion>

默认展开

默认展开的手风琴

使用 defaultOpen 属性可以让特定手风琴在页面加载时默认展开。这对于突出重要信息或常用内容非常有用。

Markdown

<Accordion title='默认展开的手风琴' defaultOpen={true}>
  使用 `defaultOpen` 属性可以让特定手风琴在页面加载时默认展开。这对于突出重要信息或常用内容非常有用。
</Accordion>

属性

title

stringRequired

显示在手风琴标题栏中的标题

children

string | JSXRequired

手风琴展开时显示的内容。可以包含文本、Markdown 和组件。

defaultOpen

boolean

页面加载时手风琴是否默认展开。如未指定，则默认折叠。

string

手风琴的唯一 ID。用于链接和导航。如未指定，将自动生成一个 ID。

className

string

应用于手风琴组件的额外 CSS 类名