---
title: 折叠面板
description: 可折叠的内容区域，让用户仅展开所需内容。适用于常见问题、功能列表和配置选项。
---
> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.
可折叠的区域——读者可以看到标题，并展开查看详细信息。支持图标、描述和分组。
在以下场景中使用 Accordion：
- **常见问题** - 用户浏览问题并展开答案
- **功能列表** - 每项功能都有包含详细信息的区域
- **配置选项** - 按类别对设置进行分组
- **分步指南** - 提供可展开的详细信息
## 用法
```mdx
Optional details go here.
```
## 基本折叠面板
此内容在折叠面板展开前处于隐藏状态。
你可以在此处添加任意内容：文本、代码、图像或其他组件。
```mdx
This content is hidden until the accordion is expanded.
You can include any content here: text, code, images, or other components.
```
## 添加描述
使用 `description` 属性添加副标题：
此处填写身份验证 API 端点的文档。
```mdx
Documentation for authentication API endpoints goes here.
```
## 默认展开
使用 `defaultOpen` 使内容默认展开：
此折叠面板初始处于展开状态。
```mdx
This accordion starts in the open state.
```
## 添加图标
配置选项和设置。
```mdx
Configuration options and settings.
```
## Accordion 与 Expandable 的比较
| 功能 | Accordion | Expandable |
|---------|-----------|------------|
| 图标 | 是 | 否 |
| 描述 | 是（副标题） | 否 |
| 分组 | AccordionGroup | 独立 |
| 视觉权重 | 更突出，类似区域 | 更轻量，显示在行内 |
| 最适用场景 | 常见问题、功能列表 | 补充内容 |
**经验法则：** 当各区域同等重要且用户需要在它们之间进行选择时，使用 Accordion。对于不需要突出显示的“锦上添花”详细信息，使用 Expandable。
## 属性
Accordion 标题文本。
显示在标题下方的副标题。
Font Awesome 图标名称（例如 "gear"、"settings"）。
图标样式变体：light、regular 或 solid。
初始处于展开状态。
## 接下来？
浏览所有可用组件
了解如何在 MDX 中使用组件