Tabs 标签页新

引入

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

用法

组件结构

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

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.ListContainer 会自动渲染滚动箭头与渐隐边缘，使用户可以导航到被隐藏的标签。水平与垂直方向均支持此行为。

禁用 Tab

带分隔线

在每个 <Tabs.Tab> 内（第一项除外）添加 <Tabs.Separator />，用于在标签之间显示分隔线。

自定义样式

Secondary 变体

Secondary 变体（垂直）

自定义渲染函数

样式

传入 Tailwind CSS 类

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

function CustomTabs() {
return (
  <Tabs className="w-full max-w-lg text-center">

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

Tabs.List Props

Tabs.Tab Props

Tabs.Separator Props

Tabs.Panel Props