编写内容组件

手风琴组件

以 Markdown 格式查看

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

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

用法

第 1 节

第 1 节的内容，默认展开

第 2 节的内容

Markdown
1<AccordionGroup>
2  <Accordion title="第 1 节" defaultOpen={true}>
3    第 1 节的内容，默认展开
4  </Accordion>
5  <Accordion title="第 2 节">
6    第 2 节的内容
7  </Accordion>
8</AccordionGroup>

变体

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

多媒体

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

嵌套组件

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

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

默认展开

默认展开的手风琴

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

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

属性

title
stringRequired

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

children
string | JSXRequired

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

defaultOpen
boolean

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

id
string

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

className
string

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