If | Fern Documentation

<If> 组件让您可以基于读者正在查看的产品或版本，或者如果您的文档使用身份验证时基于他们的角色来显示或隐藏内容。

变体

按产品

使用 products 属性来仅在读者查看特定产品时显示内容。products 数组中的值对应于您的 docs.yml 中定义的产品标识符。

Markdown

1 <If products={["orchids"]}>
2   此内容仅在查看兰花产品时显示。
3 </If>
4 
5 <If products={["orchids", "succulents"]}>
6   此内容在兰花和多肉植物产品中都会显示。
7 </If>

按版本

使用 versions 属性来仅在读者查看特定版本时显示内容。versions 数组中的值对应于您的 docs.yml 中定义的版本标识符。

Markdown

1 <If versions={["v1"]}>
2   此内容仅在版本 v1 中显示。
3 </If>
4 
5 <If versions={["v2"]}>
6   此内容仅在版本 v2 中显示。
7 </If>

按角色

使用 roles 属性来根据已认证用户的角色显示内容。roles 数组中的值对应于您的基于角色的访问控制配置中定义的角色。

Markdown

1 <If roles={["admin"]}>
2   此内容仅对管理员可见。
3 </If>

组合条件

您可以在单个 <If> 组件上组合 products、versions 和 roles 属性。当指定多个属性时，所有条件都必须匹配。

Markdown

1 <If products={["orchids"]} versions={["v2"]}>
2   此内容仅在查看版本 v2 的兰花产品时显示。
3 </If>
4 
5 <If products={["succulents"]} roles={["beta-users"]}>
6   此内容仅在多肉植物产品中对 beta 用户显示。
7 </If>

反转条件

使用 not 属性来反转任何条件，在条件不匹配时显示内容。

Markdown

1 <If products={["legacy"]} not>
2   此内容在除 legacy 之外的所有产品中显示。
3 </If>
4 
5 <If versions={["v1"]} not>
6   此内容在除 v1 之外的所有版本中显示。
7 </If>

属性

products

string[]

仅在读者查看指定产品之一时显示内容。值对应于您的 docs.yml 中定义的产品标识符。

versions

string[]

仅在读者查看指定版本之一时显示内容。值对应于您的 docs.yml 中定义的版本标识符。

roles

string[]

仅在已认证用户具有指定角色之一时显示内容。

not

booleanDefaults to false

反转条件，在条件不匹配时显示内容。

children

string | JSXRequired

要根据条件显示或隐藏的内容。