Indent

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

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

使用方法

此文本未缩进。

此文本已缩进。

此文本再次未缩进。

Markdown

1 此文本未缩进。
2 <Indent>
3   此文本已缩进。
4 </Indent>
5 此文本再次未缩进。

变体

与其他组件结合

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

class User

属性：

stringRequired

用户的唯一标识符

stringRequired

用户的电子邮件地址

name

string

用户的显示名称

Markdown

1 <Accordion title="class User">
2   <div><strong>属性：</strong></div>
3   <Indent>
4     <ParamField path="id" type="string" required={true}>
5       用户的唯一标识符
6     </ParamField>
7     <ParamField path="email" type="string" required={true}>
8       用户的电子邮件地址
9     </ParamField>
10     <ParamField path="name" type="string">
11       用户的显示名称
12     </ParamField>
13   </Indent>
14 </Accordion>

多层嵌套

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

config

objectRequired

应用程序配置对象

config.database

objectRequired

数据库连接设置

config.database.host

stringRequired

数据库服务器主机名

config.database.credentials

objectRequired

身份验证凭据

config.database.credentials.username

stringRequired

数据库用户名

config.database.credentials.password

stringRequired

数据库密码

config.cache

object

缓存配置

config.cache.ttl

number

生存时间（秒）

Markdown

1 <ParamField path="config" type="object" required={true}>
2   应用程序配置对象
3 </ParamField>
4 <Indent>
5   <ParamField path="config.database" type="object" required={true}>
6     数据库连接设置
7   </ParamField>
8   <Indent>
9     <ParamField path="config.database.host" type="string" required={true}>
10       数据库服务器主机名
11     </ParamField>
12     <ParamField path="config.database.credentials" type="object" required={true}>
13       身份验证凭据
14     </ParamField>
15     <Indent>
16       <ParamField path="config.database.credentials.username" type="string" required={true}>
17         数据库用户名
18       </ParamField>
19       <ParamField path="config.database.credentials.password" type="string" required={true}>
20         数据库密码
21       </ParamField>
22     </Indent>
23   </Indent>
24   <ParamField path="config.cache" type="object">
25     缓存配置
26   </ParamField>
27   <Indent>
28     <ParamField path="config.cache.ttl" type="number">
29       生存时间（秒）
30     </ParamField>
31   </Indent>
32 </Indent>

属性

children

ReactNodeRequired

要缩进的内容。可以包含任何 React 元素、组件、文本或 markdown。

className

string

用于自定义样式的可选 CSS 类名。该组件默认包含 fern-indent 类，可用于自定义样式。

1	此文本未缩进。
2	<Indent>
3	此文本已缩进。
4	</Indent>
5	此文本再次未缩进。

1	<Accordion title="class User">
2	<div><strong>属性：</strong></div>
3	<Indent>
4	<ParamField path="id" type="string" required={true}>
5	用户的唯一标识符
6	</ParamField>
7	<ParamField path="email" type="string" required={true}>
8	用户的电子邮件地址
9	</ParamField>
10	<ParamField path="name" type="string">
11	用户的显示名称
12	</ParamField>
13	</Indent>
14	</Accordion>

1	<ParamField path="config" type="object" required={true}>
2	应用程序配置对象
3	</ParamField>
4	<Indent>
5	<ParamField path="config.database" type="object" required={true}>
6	数据库连接设置
7	</ParamField>
8	<Indent>
9	<ParamField path="config.database.host" type="string" required={true}>
10	数据库服务器主机名
11	</ParamField>
12	<ParamField path="config.database.credentials" type="object" required={true}>
13	身份验证凭据
14	</ParamField>
15	<Indent>
16	<ParamField path="config.database.credentials.username" type="string" required={true}>
17	数据库用户名
18	</ParamField>
19	<ParamField path="config.database.credentials.password" type="string" required={true}>
20	数据库密码
21	</ParamField>
22	</Indent>
23	</Indent>
24	<ParamField path="config.cache" type="object">
25	缓存配置
26	</ParamField>
27	<Indent>
28	<ParamField path="config.cache.ttl" type="number">
29	生存时间（秒）
30	</ParamField>
31	</Indent>
32	</Indent>