---
title: 选项卡
description: 用于切换互斥内容（如包管理器或编程语言）的面板。整个页面中的匹配选项卡标题会同步。
---
> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.
当页面提供并行的替代方案（包管理器、编程语言或特定操作系统的说明）时，Tabs 允许读者选择一次并始终保持在对应上下文中。整个页面中的匹配选项卡标题会自动同步，因此在一个组选中“yarn”后，其他 npm/yarn/pnpm 选项卡组也会切换到相同选项。
在以下情况下使用 Tabs：
- 存在同一概念的**多种实现**（npm/yarn/pnpm、JavaScript/Python）
- **并行选项**互斥（用户只能选择其中一个）
- **一致性很重要**——读者的选择应在整个页面中保持不变
## 用法
```mdx
npm install jamdesk
pnpm add jamdesk
```
## 基本选项卡
第一个选项卡的内容。
第二个选项卡的内容。
第三个选项卡的内容。
```mdx
Content for the first tab.
Content for the second tab.
Content for the third tab.
```
## 选项卡与 CodeGroup 和 Accordion 的比较
| 组件 | 最适用场景 | 是否同步 |
|-----------|----------|--------------|
| **Tabs** | 互斥的内容选项 | 是（跨页面） |
| **CodeGroup** | 多种语言的代码块 | 否 |
| **Accordion** | 可折叠的部分、常见问题 | 否 |
**经验法则：**当读者的选择（如首选包管理器）应在整个页面中保持不变时，使用 Tabs。仅比较代码时使用 CodeGroup。对于可能全部相关的内容，使用 Accordion。
## 带图标的选项卡
使用 Font Awesome 图标为选项卡标题添加图标：
```jsx
function App() {
return Hello React
;
}
```
```vue
Hello Vue
```
````mdx
```jsx
function App() {
return Hello React
;
}
```
```vue
Hello Vue
```
````
## 底部边框
使用 `borderBottom` 属性在选项卡内容下方添加视觉分隔线：
此选项卡组带有底部边框，用于实现视觉分隔。
当选项卡包含长度不同的内容时很有用。
```mdx
This tab group has a bottom border for visual separation.
Useful when tabs contain varying content lengths.
```
## 同步选项卡
标题匹配的选项卡会自动在整个页面中同步。在一个组选中“yarn”后，页面上的所有 npm/yarn/pnpm 选项卡都会一起切换：
**安装：**
```bash
npm install my-package
```
```bash
yarn add my-package
```
**运行：**
```bash
npm run dev
```
```bash
yarn dev
```
当选项卡标题匹配时（不区分大小写），就会进行同步。
## 属性
### Tabs
为选项卡内容容器添加底部边框和内边距。用于在视觉上将选项卡内容与页面的其余部分分隔开。
### Tab
显示在选项卡栏中的标签。标题匹配的选项卡会自动在整个页面中同步其选择。
要在标题前显示的 Font Awesome 图标名称（例如 "react"、"code"、"terminal"）。
Font Awesome 图标样式。可选值：`regular`、`solid`、`light`、`thin`、`sharp-solid`、`duotone`、`brands`。
## 接下来做什么？
浏览所有可用组件
了解如何在 MDX 中使用组件