# Tabs 标签页 · HeroUI

> Tabs 将内容组织为多个区块，并允许用户在它们之间导航。

- 页面: https://jiguang132.com/zh/systems/heroui/docs/components/tabs
- 改编自: HeroUI 文档 (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

## 引入

```tsx
import { Tabs } from '@heroui/react';
```

### 用法


> 示例 `tabs-basic`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/components/tabs


### 组件结构

导入 Tabs 组件后，可通过点语法访问所有子部分。

```tsx
import { Tabs } from '@heroui/react';

export default () => (
  <Tabs>
    <Tabs.ListContainer>
      <Tabs.List aria-label="Options">
        <Tabs.Tab>
          <Tabs.Separator /> {/* Optional */}
          <Tabs.Indicator />
        </Tabs.Tab>
      </Tabs.List>
    </Tabs.ListContainer>
    <Tabs.Panel/>
  </Tabs>
)
```

### 垂直布局


> 示例 `tabs-vertical`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/components/tabs


### 溢出

当标签列表超出可用空间时，`Tabs.ListContainer` 会自动渲染滚动箭头与渐隐边缘，使用户可以导航到被隐藏的标签。水平与垂直方向均支持此行为。


> 示例 `tabs-overflow`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/components/tabs


### 禁用 Tab


> 示例 `tabs-disabled`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/components/tabs


### 带分隔线

在每个 `` 内（第一项除外）添加 ``，用于在标签之间显示分隔线。


> 示例 `tabs-with-separator`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/components/tabs


### 自定义样式


> 示例 `tabs-custom-styles`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/components/tabs


### Secondary 变体


> 示例 `tabs-secondary`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/components/tabs


### Secondary 变体（垂直）


> 示例 `tabs-secondary-vertical`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/components/tabs


### 自定义渲染函数


> 示例 `tabs-custom-render-function`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/components/tabs


## 样式

### 传入 Tailwind CSS 类


      
        
          Daily
          Weekly
          Bi-Weekly
          Monthly
        
      
      
        <h3 className="mb-2 font-semibold">Daily</h3>
        Manage your daily tasks and goals.
      
      
        <h3 className="mb-2 font-semibold">Weekly</h3>
        Manage your weekly tasks and goals.
      
      
        <h3 className="mb-2 font-semibold">Bi-Weekly</h3>
        Manage your bi-weekly tasks and goals.
      
      
        <h3 className="mb-2 font-semibold">Monthly</h3>
        Manage your monthly tasks and goals.
      
    
  );
}
`} />

### CSS 类

Tabs 使用以下 CSS 类：

#### 基础类
- `.tabs` — Tabs 根容器
- `.tabs__list-container` — 标签列表容器外层包裹
- `.tabs__list-container__scroller` — 标签列表的可滚动容器（处理溢出与渐隐边缘）
- `.tabs__list-container__scroll-prev` — 向前（左 / 上）滚动的箭头按钮
- `.tabs__list-container__scroll-next` — 向后（右 / 下）滚动的箭头按钮
- `.tabs__list` — 标签列表容器
- `.tabs__tab` — 单个标签按钮
- `.tabs__separator` — 标签之间的分隔线
- `.tabs__panel` — 标签面板内容
- `.tabs__indicator` — 标签指示器

#### 方向属性
- `.tabs[data-orientation="horizontal"]` — 水平标签布局（默认）
- `.tabs[data-orientation="vertical"]` — 垂直标签布局

#### 变体类
- `.tabs--secondary` — Secondary 变体，使用下划线指示器

### 交互状态

组件同时支持 CSS 伪类与 data 属性：

- **已选中**：`[aria-selected="true"]`
- **悬停**：`:hover` 或 `[data-hovered="true"]`
- **焦点**：`:focus-visible` 或 `[data-focus-visible="true"]`
- **禁用**：`[aria-disabled="true"]`


## API 参考

### Tabs Props

| Prop | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| `variant` | `"primary" \| "secondary"` | `"primary"` | 视觉样式变体。Primary 使用填充指示器，Secondary 使用下划线指示器 |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | 标签布局方向 |
| `selectedKey` | `string` | - | 受控选中标签的 key |
| `defaultSelectedKey` | `string` | - | 默认选中标签的 key |
| `onSelectionChange` | `(key: Key) => void` | - | 选中变化事件处理函数 |
| `className` | `string` | - | 附加的 CSS 类 |
| `render` | `DOMRenderFunction<keyof React.JSX.IntrinsicElements, TabsRenderProps>` | - | 使用自定义渲染函数覆盖默认 DOM 元素。 |

### Tabs.List Props

| Prop | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| `aria-label` | `string` | - | 标签列表的无障碍标签 |
| `className` | `string` | - | 附加的 CSS 类 |
| `render` | `DOMRenderFunction<keyof React.JSX.IntrinsicElements, TabListRenderProps>` | - | 使用自定义渲染函数覆盖默认 DOM 元素。 |

### Tabs.Tab Props

| Prop | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| `id` | `string` | - | 标签唯一标识 |
| `isDisabled` | `boolean` | `false` | 是否禁用该标签 |
| `className` | `string` | - | 附加的 CSS 类 |
| `render` | `DOMRenderFunction<keyof React.JSX.IntrinsicElements, TabRenderProps>` | - | 使用自定义渲染函数覆盖默认 DOM 元素。 |

### Tabs.Separator Props

| Prop | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| `className` | `string` | - | 附加的 CSS 类 |

### Tabs.Panel Props

| Prop | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| `id` | `string` | - | 与对应 Tab id 匹配的面板标识 |
| `className` | `string` | - | 附加的 CSS 类 |
| `render` | `DOMRenderFunction<keyof React.JSX.IntrinsicElements, TabPanelRenderProps>` | - | 使用自定义渲染函数覆盖默认 DOM 元素。 |

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt