Tabs 标签页
Tabs 将内容组织为多个区块，并允许用户在它们之间导航。
引入
import { Tabs } from '@heroui/react';用法
概览
分析
报告
查看项目概览与近期活动。
import {Tabs} from "@heroui/react";
export function Basic() {
return (
<Tabs className="w-full max-w-md">组件结构
导入 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>
)垂直布局
账户
安全
通知
账单
账户 Settings
管理你的账户信息与偏好设置。
import {Tabs} from "@heroui/react";
export function Vertical() {
return (
<Tabs className="w-full max-w-lg" orientation="vertical">禁用 Tab
启用
已禁用
可用
此标签页已启用，可以选择。
import {Tabs} from "@heroui/react";
export function Disabled() {
return (
<Tabs className="w-full max-w-md">带分隔线
在每个 <Tabs.Tab> 内（第一项除外）添加 <Tabs.Separator />，用于在标签之间显示分隔线。
概览
分析
报告
查看项目概览与近期活动。
import {Tabs} from "@heroui/react";
export function WithSeparator() {
return (
<Tabs className="w-full max-w-md">自定义样式
每日
每周
每两周
每月
import {Tabs} from "@heroui/react";
export function CustomStyles() {
return (
<Tabs className="w-full max-w-lg text-center">Secondary 变体
概览
分析
报告
查看项目概览与近期活动。
import {Tabs} from "@heroui/react";
export function Secondary() {
return (
<Tabs className="w-full max-w-md" variant="secondary">Secondary 变体（垂直）
账户
安全
通知
账单
账户 Settings
管理你的账户信息与偏好设置。
import {Tabs} from "@heroui/react";
export function SecondaryVertical() {
return (
<Tabs className="w-full max-w-lg" orientation="vertical" variant="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— 标签列表容器.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 元素。 |
