Expandable
Expandable 可创建简单的显示/隐藏切换,用于收起读者可能需要但并非主流程必需的内容。
使用 Expandable 收起冗长的 API 响应、故障排除步骤或补充详细信息,避免打断阅读流程。它会呈现为一个可点击的展开项。它比 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。
