---
title: Expandable
description: Expandable 可创建简单的显示/隐藏切换，用于收起读者可能需要但并非主流程必需的内容。
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

使用 Expandable 收起冗长的 API 响应、故障排除步骤或补充详细信息，避免打断阅读流程。它会呈现为一个可点击的展开项。它比 Accordion 更轻量，后者适用于组织成组且可导航的区块。

在以下情况下使用 Expandable：
- **补充详细信息** 会打断主要叙述
- **可选信息** 只对部分读者有帮助
- **长内容**（例如完整的 API 响应）应默认折叠

## 基本用法

<Expandable title="显示更多详细信息">
  这些详细信息默认隐藏，点击后显示。
</Expandable>

```mdx
<Expandable title="Show more details">
  These details are hidden by default and revealed when clicked.
</Expandable>
```

## 默认展开

开始时即展开：

<Expandable title="默认展开" defaultOpen>
  此区块开始时可见。
</Expandable>

```mdx
<Expandable title="Expanded by default" defaultOpen>
  This section starts visible.
</Expandable>
```

## 常见使用场景

### API 响应详细信息

折叠可能会打断文档阅读流程的冗长响应：

<Expandable title="查看完整响应">
```json
{
  "id": "123",
  "name": "Example",
  "metadata": {
    "created": "2024-01-01",
    "updated": "2024-01-15"
  }
}
```
</Expandable>

### 故障排除步骤

<Expandable title="遇到连接问题？">
  1. 检查网络连接
  2. 确认 API 端点正确
  3. 确保 API 密钥有效
</Expandable>

## 属性

<ParamField name="title" type="string" required>
  区块标题文本。
</ParamField>

<ParamField name="defaultOpen" type="boolean" default="false">
  是否开始时展开。
</ParamField>

## Expandable 与 Accordion 的对比

| 功能 | Expandable | Accordion |
|---------|------------|-----------|
| 用途 | 隐藏补充内容 | 组织重要性相同的区块 |
| 图标 | 否 | 是 |
| 描述 | 否 | 是（支持副标题） |
| 分组 | 独立使用 | 可与 AccordionGroup 组合 |
| 最适合 | 可选详细信息、较长示例 | 常见问题、功能列表、导航 |

**经验法则：** 如果内容“有则更好”，请使用 Expandable。如果用户需要在多个区块之间进行选择，请使用 Accordion。

## 下一步

<Columns cols={2}>
  <Card title="组件概览" icon="puzzle-piece" href="/cn/components/overview">
    浏览所有可用组件
  </Card>
  <Card title="MDX 基础" icon="file-code" href="/cn/content/mdx-basics">
    了解如何在 MDX 中使用组件
  </Card>
</Columns>