Expandable
Expandable 隐藏补充细节、长 API 响应和故障排除步骤,是 Accordion 的轻量替代方案
使用 Expandable 隐藏长 API 响应、故障排除步骤或会打断阅读流程的额外细节。它呈现为一个可点击展开的折叠块,比 Accordion 更轻量。Accordion 适用于分组且可导航的章节。
在以下情况使用 Expandable:
- 补充细节会打断主要叙述
- 可选信息对部分读者有用,但并非所有人都需要
- 长内容(如完整的 API 响应)应默认折叠
基本用法
<Expandable title="Show more details">
These details are hidden by default and revealed when clicked.
</Expandable>
默认展开
初始即展开:
此部分初始即可见。
<Expandable title="Expanded by default" defaultOpen>
This section starts visible.
</Expandable>
常见使用场景
API 响应详细信息
折叠长响应:
故障排除步骤
属性
stringrequired章节标题文本。
booleandefault: false初始即展开。
Expandable 与 Accordion 的对比
| 特性 | Expandable | Accordion |
|---|---|---|
| 用途 | 隐藏补充内容 | 组织同等重要的章节 |
| 图标 | 否 | 是 |
| 描述 | 否 | 是(支持副标题) |
| 分组 | 独立使用 | 可与 AccordionGroup 组合 |
| 最适合 | 可选细节、长示例 | 常见问题、功能列表、导航 |
经验法则: 如果内容是"锦上添花"的,使用 Expandable。如果读者需要在多个章节之间选择,使用 Accordion。
