折叠面板 - Mintlify

折叠面板允许用户展开和收起内容区块。将折叠面板用于循序渐进地呈现信息，并帮助组织内容。当你打开一个折叠面板时，URL 的哈希值会更新，这样你就可以分享指向特定折叠面板区域的直接链接。

单个折叠面板

我是一个折叠面板。

你可以在这里放入任何内容，包括其他组件，例如代码：

HelloWorld.java

 class HelloWorld {
     public static void main(String[] args) {
         System.out.println("Hello, World!");
     }
 }

Accordion example

<Accordion title="我是一个折叠面板。">
  您可以在这里放置任何内容，包括其他组件，比如代码：

   ```java HelloWorld.java
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Hello, World!");
        }
    }
  ```
</Accordion>

折叠面板分组

使用 <AccordionGroup> 将相关折叠面板组合在一起。这样可构成一个连贯的区块，每个面板都可单独展开或收起。

入门

你可以在折叠面板中嵌入其他组件。

HelloWorld.java

class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

高级功能

添加图标可让折叠面板更易区分并便于快速浏览。

故障排除

将相关内容归类到同一分组中。

Accordion Group Example

<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>

属性

title

string

必填

折叠面板预览中的标题。

description

string

折叠面板预览中标题下方的说明。

defaultOpen

boolean

默认值:"false"

折叠面板默认是否展开。

string

用于锚点链接的折叠面板自定义 ID。若省略，则默认与 title 的值相同。

icon

string

要显示的图标。可选值：

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。

iconType

string

Font Awesome 的图标样式。仅在使用 Font Awesome 图标时生效。可选值：regular、solid、light、thin、sharp-solid、duotone、brands。

​单个折叠面板

​折叠面板分组

​属性

单个折叠面板

折叠面板分组

属性