标签页
用于互斥内容（如包管理器或编程语言）的可切换面板。页面中标题相同的标签页会同步切换。
对于并列的备选内容（包管理器、编程语言或特定操作系统的说明），使用 Tabs。读者只需选择一次，即可保持上下文。标题相同的标签页会在整个页面同步。在一个分组中选择 "yarn"，页面上其他所有 npm/yarn/pnpm 分组都会随之切换。
在以下情况使用 Tabs：
- 同一概念存在多种实现（npm/yarn/pnpm、JavaScript/Python）
- 并列选项互斥（读者只能选择一个）
- 一致性很重要：读者的选择应在整个页面中保持不变
用法
<Tabs>
<Tab title="npm">npm install jamdesk</Tab>
<Tab title="pnpm">pnpm add jamdesk</Tab>
</Tabs>基本选项卡
第一个标签页的内容。
<Tabs>
<Tab title="First Tab">
Content for the first tab.
</Tab>
<Tab title="Second Tab">
Content for the second tab.
</Tab>
<Tab title="Third Tab">
Content for the third tab.
</Tab>
</Tabs>选项卡与 CodeGroup 和 Accordion 的比较
| 组件 | 最适合 | 是否同步 |
|---|---|---|
| Tabs | 互斥的内容选择 | 是（跨页面） |
| CodeGroup | 多种语言的代码块 | 否 |
| Accordion | 可折叠的章节、常见问题 | 否 |
经验法则： 当读者的选择（如首选的包管理器）应在整个页面中保持不变时，使用 Tabs。仅用于代码对比时使用 CodeGroup。内容都可能相关时使用 Accordion。
带图标的选项卡
为标签页标题添加 Font Awesome 图标：
function App() {
return <h1>Hello React</h1>;
}<Tabs>
<Tab title="React" icon="react" iconType="brands">
```jsx
function App() {
return <h1>Hello React</h1>;
}
```
</Tab>
<Tab title="Vue" icon="vuejs" iconType="brands">
```vue
<template>
<h1>Hello Vue</h1>
</template>
```
</Tab>
</Tabs>底部边框
使用 borderBottom 属性在标签页内容下方添加视觉分隔线：
此标签页组底部带有边框，用于视觉分隔。
<Tabs borderBottom>
<Tab title="Overview">
This tab group has a bottom border for visual separation.
</Tab>
<Tab title="Details">
Useful when tabs contain varying content lengths.
</Tab>
</Tabs>同步选项卡
标题相同的标签页会在整个页面同步。在一个分组中点击 "yarn"，页面上所有 npm/yarn/pnpm 分组都会随之切换：
安装：
npm install my-package运行：
npm run dev当标签页标题匹配时（不区分大小写）即会同步。
属性
Tabs
为标签页内容容器添加底部边框和内边距。用于将标签页内容与页面其他部分分隔开。
Tab
在标签栏中显示的标签文字。标题相同的标签页会在整个页面同步选择状态。
显示在标题前的 Font Awesome 图标名称（例如 "react"、"code"、"terminal"）。
Font Awesome 图标样式。可选值：regular、solid、light、thin、sharp-solid、duotone、brands。