折叠面板
使用折叠面板组件在文档中显示和隐藏内容区块、组织相关信息，并实现渐进式信息披露。
折叠面板允许用户展开和收起内容区块。将折叠面板用于循序渐进地呈现信息，并帮助组织内容。
当你打开一个折叠面板时，URL 的哈希值会更新，这样你就可以分享指向特定折叠面板区域的直接链接。
<Accordion title="我是一个折叠面板。">
您可以在这里放置任何内容，包括其他组件，比如代码：
```java HelloWorld.java
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
```
</Accordion>使用 <AccordionGroup> 将相关折叠面板组合在一起。这样可构成一个连贯的区块，每个面板都可单独展开或收起。
<AccordionGroup>
<Accordion title="入门指南">
您可以在折叠面板内放置其他组件。
```java HelloWorld.java
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
```
</Accordion>
<Accordion title="高级功能" icon="alien-8bit">
添加图标可以让折叠面板更具视觉区分度和易于浏览。
</Accordion>
<Accordion title="故障排除">
将相关内容组织成组。
</Accordion>
</AccordionGroup>titlestringrequired折叠面板预览中的标题。
descriptionstring折叠面板预览中标题下方的说明。
defaultOpenbooleandefault: false折叠面板默认是否展开。
idstring用于锚点链接的折叠面板自定义 ID。若省略，则默认与 title 的值相同。
iconstring要显示的图标。
可选值：
- Font Awesome 图标名称 (如果你在
docs.json中将icons.library属性 设置为fontawesome) - Lucide 图标名称 (如果你在
docs.json中将icons.library属性 设置为lucide) - Tabler 图标名称 (如果你在
docs.json中将icons.library属性 设置为tabler) - 指向外部托管图标的 URL
- 项目中图标文件的路径
- 用花括号包裹的 SVG 代码
对于自定义 SVG 图标：
- 使用 SVGR 转换器 转换你的 SVG。
- 将 SVG 代码粘贴到 SVG 输入框。
- 从 JSX 输出框中复制完整的
<svg>...</svg>元素。 - 用花括号包裹可用于 JSX 的 SVG 代码：
icon={<svg ...> ... </svg>}。 - 根据需要调整
height和width。
iconTypestringFont Awesome 的图标样式。仅在使用 Font Awesome 图标时生效。
可选值：regular、solid、light、thin、sharp-solid、duotone、brands。
Was this page helpful?Suggest editsRaise issue