Jamdesk Documentation logo

手风琴

可折叠的内容区块,读者展开即可查看详细信息。适用于常见问题、功能列表和配置选项。

手风琴是可折叠的区块。读者可以看到标题,展开后查看详细内容。手风琴可以带图标和描述,也可以将多个手风琴分组。

以下场景适合使用手风琴:

  • 常见问题:读者浏览问题,展开查看答案
  • 功能列表:每个功能对应一个包含详细说明的区块
  • 配置选项:按类别对设置进行分组
  • 带可展开细节的分步指南

用法

<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 的比较

特性AccordionExpandable
图标是否
描述是(副标题)否
分组AccordionGroup独立使用
视觉权重较重,类似章节较轻,内联
最适合常见问题、功能列表补充性内容

经验法则: 当各个章节同等重要、读者需要在其间做出选择时,使用 Accordion。对于"锦上添花"、无需突出显示的细节,使用 Expandable。

属性

stringrequired

手风琴标题文本。

string

显示在标题下方的副标题。

string

Font Awesome 图标名称(例如 "gear"、"settings")。

stringdefault: light

图标样式变体:light、regular 或 solid。

booleandefault: false

初始处于展开状态。

接下来?

组件概览

浏览所有可用组件

MDX 基础

了解如何在 MDX 中使用组件