> 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.eyJpc3MiOiJmZXJuLWRvY3M6YnVpbGR3aXRoZmVybi5jb20iLCJqdGkiOiI4NzZhY2MzMS05ZDU2LTQ1YzItOWQyYS03MDcyNzc0MDE0MDUiLCJleHAiOjE3NzgyNjQ3OTgsImlhdCI6MTc3ODI2NDQ5OH0.QRO0bN4vtAga5q2OAHTkQZETQS69806tn7feOm9upv0
>
> 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.

# Indent

> 学习如何在 Fern 中使用 Indent 组件为嵌套参数和层次化内容添加左侧缩进。

`<Indent>` 组件添加左侧缩进以创建微妙的视觉辅助，帮助在引用块和具有多层嵌套参数的长 API 页面中保持可读性。

与只接受 `<File>` 和 `<Folder>` 子元素的 `<Folder>` 组件不同，`<Indent>` 可以与所有其他组件配合使用，包括手风琴、参数字段、代码块和文本。

## 使用方法

<div>
  <div>
    此文本未缩进。

    <Indent>
      此文本已缩进。
    </Indent>

    此文本再次未缩进。
  </div>
</div>

```jsx Markdown
此文本未缩进。
<Indent>
  此文本已缩进。
</Indent>
此文本再次未缩进。
```

## 变体

### 与其他组件结合

将 `<Indent>` 与手风琴和参数字段等其他组件结合使用，以组织复杂的层次结构。

<div>
  <div>
    <Accordion title="class User">
      <div>
        <strong>属性：</strong>
      </div>

      <Indent>
        <ParamField path="id" type="string" required={true}>
          用户的唯一标识符
        </ParamField>

        <ParamField path="email" type="string" required={true}>
          用户的电子邮件地址
        </ParamField>

        <ParamField path="name" type="string">
          用户的显示名称
        </ParamField>
      </Indent>
    </Accordion>
  </div>
</div>

```jsx Markdown
<Accordion title="class User">
  <div><strong>属性：</strong></div>
  <Indent>
    <ParamField path="id" type="string" required={true}>
      用户的唯一标识符
    </ParamField>
    <ParamField path="email" type="string" required={true}>
      用户的电子邮件地址
    </ParamField>
    <ParamField path="name" type="string">
      用户的显示名称
    </ParamField>
  </Indent>
</Accordion>
```

### 多层嵌套

将 `<Indent>` 组件嵌套多个层级以显示复杂的 API 参数层次结构。每个层级都会添加另一层缩进。

<div>
  <div>
    <ParamField path="config" type="object" required={true}>
      应用程序配置对象
    </ParamField>

    <Indent>
      <ParamField path="config.database" type="object" required={true}>
        数据库连接设置
      </ParamField>

      <Indent>
        <ParamField path="config.database.host" type="string" required={true}>
          数据库服务器主机名
        </ParamField>

        <ParamField path="config.database.credentials" type="object" required={true}>
          身份验证凭据
        </ParamField>

        <Indent>
          <ParamField path="config.database.credentials.username" type="string" required={true}>
            数据库用户名
          </ParamField>

          <ParamField path="config.database.credentials.password" type="string" required={true}>
            数据库密码
          </ParamField>
        </Indent>
      </Indent>

      <ParamField path="config.cache" type="object">
        缓存配置
      </ParamField>

      <Indent>
        <ParamField path="config.cache.ttl" type="number">
          生存时间（秒）
        </ParamField>
      </Indent>
    </Indent>
  </div>
</div>

```jsx Markdown
<ParamField path="config" type="object" required={true}>
  应用程序配置对象
</ParamField>
<Indent>
  <ParamField path="config.database" type="object" required={true}>
    数据库连接设置
  </ParamField>
  <Indent>
    <ParamField path="config.database.host" type="string" required={true}>
      数据库服务器主机名
    </ParamField>
    <ParamField path="config.database.credentials" type="object" required={true}>
      身份验证凭据
    </ParamField>
    <Indent>
      <ParamField path="config.database.credentials.username" type="string" required={true}>
        数据库用户名
      </ParamField>
      <ParamField path="config.database.credentials.password" type="string" required={true}>
        数据库密码
      </ParamField>
    </Indent>
  </Indent>
  <ParamField path="config.cache" type="object">
    缓存配置
  </ParamField>
  <Indent>
    <ParamField path="config.cache.ttl" type="number">
      生存时间（秒）
    </ParamField>
  </Indent>
</Indent>
```

## 属性

<ParamField path="children" type="ReactNode" required={true}>
  要缩进的内容。可以包含任何 React 元素、组件、文本或 markdown。
</ParamField>

<ParamField path="className" type="string" required={false}>
  用于自定义样式的可选 CSS 类名。该组件默认包含 `fern-indent` 类，可用于自定义样式。
</ParamField>