选项卡
用于切换互斥内容（如包管理器或编程语言）的面板。整个页面中的匹配选项卡标题会同步。
当页面提供并行的替代方案（包管理器、编程语言或特定操作系统的说明）时，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。