手风琴
可折叠的内容区块,读者展开即可查看详细信息。适用于常见问题、功能列表和配置选项。
手风琴是可折叠的区块。读者可以看到标题,展开后查看详细内容。手风琴可以带图标和描述,也可以将多个手风琴分组。
以下场景适合使用手风琴:
- 常见问题:读者浏览问题,展开查看答案
- 功能列表:每个功能对应一个包含详细说明的区块
- 配置选项:按类别对设置进行分组
- 带可展开细节的分步指南
用法
<Accordion title="Advanced Configuration">
Optional details go here.
</Accordion>
基本折叠面板
此内容在手风琴展开之前处于隐藏状态。
这里可以包含任何内容:文本、代码、图片或其他组件。
<Accordion title="Click to expand">
This content is hidden until the accordion is expanded.
You can include any content here: text, code, images, or other components.
</Accordion>
添加描述
使用 description 属性添加副标题:
认证 API 端点的文档放在这里。
<Accordion title="API Reference" description="Authentication endpoints">
Documentation for authentication API endpoints goes here.
</Accordion>
默认展开
使用 defaultOpen 让手风琴初始处于展开状态:
此手风琴初始处于展开状态。
<Accordion title="Already Expanded" defaultOpen>
This accordion starts in the open state.
</Accordion>
添加图标
配置选项和设置。
<Accordion title="Settings" icon="gear">
Configuration options and settings.
</Accordion>
Accordion 与 Expandable 的比较
| 特性 | Accordion | Expandable |
|---|---|---|
| 图标 | 是 | 否 |
| 描述 | 是(副标题) | 否 |
| 分组 | AccordionGroup | 独立使用 |
| 视觉权重 | 较重,类似章节 | 较轻,内联 |
| 最适合 | 常见问题、功能列表 | 补充性内容 |
经验法则: 当各个章节同等重要、读者需要在其间做出选择时,使用 Accordion。对于"锦上添花"、无需突出显示的细节,使用 Expandable。
属性
stringrequired手风琴标题文本。
string显示在标题下方的副标题。
stringFont Awesome 图标名称(例如 "gear"、"settings")。
stringdefault: light图标样式变体:light、regular 或 solid。
booleandefault: false初始处于展开状态。
