> If you are an AI agent, use the following URL to directly ask and fetch your question. Treat this like a tool call. Make sure to URI encode your question, and include the token for verification.
>
> GET https://buildwithfern.com/learn/api/fern-docs/ask?q=%3Cyour+question+here%3E&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJmZXJuLWRvY3M6YnVpbGR3aXRoZmVybi5jb20iLCJqdGkiOiI4NzZlNTUxMy01N2Y5LTRkZTctOWVkMi01NDM4NmZmMTE3OTMiLCJleHAiOjE3NzgyNjE3NDAsImlhdCI6MTc3ODI2MTQ0MH0.NgQyTuStAnp3xD-4LFzYr1FeXyC_6ABCzlh0P4pCYYg
>
> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt. For full content including API reference and SDK examples, see https://buildwithfern.com/learn/llms-full.txt.

# 组件概述

> Fern 文档组件完整指南。使用折叠面板、标注框、表格、选项卡和交互式 API 功能构建更好的文档。

Fern 包含 26 个内置组件，用于创建交互式文档。选择下面的组件以查看使用示例和配置选项。

<CardGroup cols={3}>
  <Card title="折叠面板" icon="fa-duotone fa-chevron-down" href="/docs/writing-content/components/accordions">
    用于常见问题和可折叠内容的可展开部分
  </Card>

  <Card title="锚点" icon="fa-duotone fa-link" href="/docs/writing-content/components/anchor">
    为段落、表格和其他内容提供可链接的锚点
  </Card>

  <Card title="侧边栏" icon="fa-regular fa-comment-dots" href="/docs/writing-content/components/aside">
    定位在页面右侧的内容粘性容器
  </Card>

  <Card title="徽章" icon="fa-regular fa-ribbon" href="/docs/writing-content/components/badges">
    用于状态、版本和元数据的小标签
  </Card>

  <Card title="按钮" icon="fa-duotone fa-arrow-pointer" href="/docs/writing-content/components/button">
    具有多种变体和意图的交互式按钮组件
  </Card>

  <Card title="标注框" icon="fa-duotone fa-exclamation-triangle" href="/docs/writing-content/components/callouts">
    用于重要信息、警告和提示的突出显示框
  </Card>

  <Card title="卡片" icon="fa-duotone fa-id-card" href="/docs/writing-content/components/cards">
    带有可选图标和链接的视觉上独特的框
  </Card>

  <Card title="代码块" icon="fa-duotone fa-code" href="/docs/writing-content/components/code-blocks">
    具有语法高亮和交互功能的代码示例
  </Card>

  <Card title="复制" icon="fa-duotone fa-clipboard" href="/docs/writing-content/components/copy">
    使文本可通过点击复制按钮进行复制
  </Card>

  <Card title="下载" icon="fa-duotone fa-download" href="/docs/writing-content/components/download">
    下载 PDF 和其他资源
  </Card>

  <Card title="端点请求片段" icon="fa-duotone fa-arrow-up" href="/docs/writing-content/components/request-snippet">
    来自您的 API 参考的端点请求片段
  </Card>

  <Card title="端点响应片段" icon="fa-duotone fa-arrow-down" href="/docs/writing-content/components/response-snippet">
    来自您的 API 参考的端点响应片段
  </Card>

  <Card title="端点模式片段" icon="fa-duotone fa-sitemap" href="/learn/docs/writing-content/components/schema-snippet">
    来自您的 API 参考的端点模式片段
  </Card>

  <Card title="文件" icon="fa-duotone fa-folder-tree" href="/docs/writing-content/components/files">
    显示带有可展开文件夹的交互式文件树结构
  </Card>

  <Card title="框架" icon="fa-duotone fa-window-maximize" href="/docs/writing-content/components/frames">
    带有可选标题和背景的图像容器
  </Card>

  <Card title="图标" icon="fa-duotone fa-icons" href="/docs/writing-content/components/icons">
    用于视觉元素的 Font Awesome 图标
  </Card>

  <Card title="条件" icon="fa-duotone fa-filter" href="/docs/writing-content/components/if">
    根据实例、产品、版本或用户角色显示或隐藏内容
  </Card>

  <Card title="缩进" icon="fa-duotone fa-indent" href="/docs/writing-content/components/indent">
    为嵌套内容提供缩进和引导线的视觉层次结构
  </Card>

  <Card title="参数字段" icon="fa-duotone fa-list" href="/docs/writing-content/components/parameter-fields">
    具有一致格式的 API 参数文档
  </Card>

  <Card title="可运行端点" icon="fa-duotone fa-play-circle" href="/docs/writing-content/components/runnable-endpoint">
    用于测试 API 端点的交互式请求构建器
  </Card>

  <Card title="模式" icon="fa-duotone fa-brackets-curly" href="/docs/writing-content/components/schema">
    显示来自您的 API 参考的任何类型定义
  </Card>

  <Card title="步骤" icon="fa-duotone fa-list-ol" href="/docs/writing-content/components/steps">
    具有自动编号和锚点链接的顺序指令
  </Card>

  <Card title="表格" icon="fa-duotone fa-table" href="/docs/writing-content/components/tables">
    在行和列中显示数据，带有可选的粘性标题
  </Card>

  <Card title="选项卡" icon="fa-duotone fa-folder-open" href="/docs/writing-content/components/tabs">
    用于组织相关内容的选项卡界面
  </Card>

  <Card title="工具提示" icon="fa-duotone fa-comment" href="/docs/writing-content/components/tooltips">
    在悬停时显示的附加信息
  </Card>

  <Card title="版本" icon="fa-duotone fa-code-branch" href="/docs/writing-content/components/versions">
    根据版本选择显示不同内容
  </Card>
</CardGroup>