mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
locadex-agent[bot]
0b34ddfb5c
Co-authored-by: locadex-agent[bot] <217277504+locadex-agent[bot]@users.noreply.github.com>
97 lines
3.5 KiB
Plaintext
97 lines
3.5 KiB
Plaintext
---
|
||
title: "选项卡"
|
||
description: "使用选项卡组织内容，以展示不同的选项或版本。"
|
||
keywords: ["标签式内容", "内容面板", "可切换内容"]
|
||
---
|
||
|
||
使用选项卡将内容组织为多个面板，用户可以在它们之间切换。你可以添加任意数量的选项卡，并在每个选项卡内包含其他组件。
|
||
|
||
<Tabs>
|
||
<Tab title="第一个标签页">
|
||
☝️ 欢迎来到只能在第一个标签页中看到的内容。
|
||
|
||
你可以在选项卡中添加任意数量的组件。例如，一个代码块：
|
||
|
||
```java HelloWorld.java
|
||
class HelloWorld {
|
||
public static void main(String[] args) {
|
||
System.out.println("Hello, World!");
|
||
}
|
||
}
|
||
```
|
||
</Tab>
|
||
|
||
<Tab title="第二个标签页" icon="leaf">
|
||
✌️ 这里是只在第二个标签页中的内容。
|
||
|
||
这个还带有一个 <Icon icon="leaf" /> 图标！
|
||
</Tab>
|
||
|
||
<Tab title="第三个标签页">
|
||
💪 这里是只在第三个标签页中的内容。
|
||
</Tab>
|
||
</Tabs>
|
||
|
||
````mdx Tabs example
|
||
<Tabs>
|
||
<Tab title="第一个标签页">
|
||
☝️ 欢迎来到只能在第一个标签页中看到的内容。
|
||
|
||
你可以在选项卡中添加任意数量的组件。例如,一个代码块:
|
||
```java HelloWorld.java
|
||
class HelloWorld {
|
||
public static void main(String[] args) {
|
||
System.out.println("Hello, World!");
|
||
}
|
||
}
|
||
```
|
||
</Tab>
|
||
<Tab title="Second tab" icon="leaf">
|
||
✌️ Here's content that's only inside the second tab.
|
||
|
||
This one has a <Icon icon="leaf" /> icon!
|
||
</Tab>
|
||
<Tab title="Third tab">
|
||
💪 Here's content that's only inside the third tab.
|
||
</Tab>
|
||
</Tabs>
|
||
````
|
||
|
||
具有相同标题的 Tabs 会在整个页面中保持同步。比如，如果你有多个标签页分组都包含一个 `JavaScript` 标签页标题，在其中一个标签页分组中选择 `JavaScript` 时，其他分组中的 `JavaScript` 也会自动被选中。这样，用户只需选择一次语言或框架，就能在所有地方看到相同的选择。Tabs 也会与具有相同标题的[代码分组](/zh/components/code-groups)同步。
|
||
|
||
要禁用标签页同步，在 `<Tabs>` 组件上添加 `sync={false}`。
|
||
|
||
```mdx Disable tab sync example
|
||
<Tabs sync={false}>
|
||
<Tab title="第一个标签页">
|
||
此选项卡组独立运行。
|
||
</Tab>
|
||
<Tab title="第二个标签页">
|
||
在此处选择标签页不会影响其他选项卡组。
|
||
</Tab>
|
||
</Tabs>
|
||
```
|
||
|
||
<div id="properties">
|
||
## 属性
|
||
</div>
|
||
|
||
<ResponseField name="title" type="string" required>
|
||
标签页的标题。标题越短，越便于导航。标题相同的选项卡会同步其选中状态。
|
||
</ResponseField>
|
||
|
||
<ResponseField name="icon" type="string">
|
||
一个 [Font Awesome](https://fontawesome.com/icons) icon、[Lucide](https://lucide.dev/icons) icon、指向图标的 URL，或图标的相对路径。
|
||
</ResponseField>
|
||
|
||
<ResponseField name="iconType" type="string">
|
||
仅适用于 Font Awesome 图标：可选值之一为 `regular`、`solid`、`light`、`thin`、`sharp-solid`、`duotone`、`brands`。
|
||
</ResponseField>
|
||
|
||
<ResponseField name="sync" type="boolean" default="true">
|
||
当为 `true` 时，标签页会与页面上其他具有相同标题的标签页和代码分组保持同步。将其设置为 `false` 可使标签页彼此独立。
|
||
</ResponseField>
|
||
|
||
<ResponseField name="borderBottom" type="boolean">
|
||
为标签页容器添加底部边框和内边距。用于在视觉上将标签页中的内容与页面的其他部分区分开来，尤其当各标签页包含的内容长短不一时非常有用。
|
||
</ResponseField> |