手风琴

手风琴（Accordion）组件可让用户展开或折叠内容区块。使用手风琴实现逐步呈现，并更好地组织信息。

单个折叠面板

我是一个折叠面板。

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

HelloWorld.java

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

折叠面板示例

<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!");
    }
}

高级功能

可添加图标，使面板在视觉上更易区分并便于快速浏览。

故障排查

将相关内容按组组织起来。

折叠组示例

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

属性

string

必填

折叠面板预览中的标题。

string

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

boolean

默认值:"false"

是否默认展开折叠面板。

string

要显示的图标。选项：

Font Awesome 图标名称
Lucide 图标名称
用花括号包裹的、与 JSX 兼容的 SVG 代码
指向外部托管图标的 URL
项目中图标文件的路径

关于自定义 SVG 图标：

使用 SVGR 转换器转换你的 SVG。
将 SVG 代码粘贴到 SVG 输入框。
从 JSX 输出框中复制完整的 <svg>...</svg> 元素。
用花括号包裹与 JSX 兼容的 SVG 代码：icon={<svg ...> ... </svg>}。
按需调整 height 和 width。

string

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

快速入门

核心配置

AI 优化

组件

API 页面

认证与个性化

指南

集成

版本控制与CI/CD

单个折叠面板

折叠面板分组

属性

​单个折叠面板

​折叠面板分组

​属性

单个折叠面板

折叠面板分组

属性