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

带分隔线

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

自定义样式

Secondary 变体

Secondary 变体（垂直）

自定义渲染函数

样式

传入 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 元素。