Tabs 标签页

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

用法

1import { Tabs } from '@lenso/ui';

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2
3import { Tabs } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5
6const styles = stylex.create({ root: { width: "100%", maxWidth: 448 }, panel: { paddingTop: 16 } });7export function Basic() {8  return (9    <Tabs defaultValue="overview" xstyle={styles.root}>10      <Tabs.ListContainer>11        <Tabs.List activateOnFocus aria-label="Options">12          <Tabs.Tab value="overview">Overview</Tabs.Tab>13          <Tabs.Tab value="analytics">Analytics</Tabs.Tab>14          <Tabs.Tab value="reports">Reports</Tabs.Tab>15          <Tabs.Indicator />16        </Tabs.List>17      </Tabs.ListContainer>18      <Tabs.Panel xstyle={styles.panel} value="overview">19        <p>View your project overview and recent activity.</p>20      </Tabs.Panel>21      <Tabs.Panel xstyle={styles.panel} value="analytics">22        <p>Track your metrics and analyze performance data.</p>23      </Tabs.Panel>24      <Tabs.Panel xstyle={styles.panel} value="reports">25        <p>Generate and download detailed reports.</p>26      </Tabs.Panel>27    </Tabs>28  );29}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

组件结构

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

1import { Tabs } from '@lenso/ui';2
3export default () => (4  <Tabs>5    <Tabs.ListContainer>6      <Tabs.List aria-label="Options">7        <Tabs.Tab>8          <Tabs.Separator /> {/* Optional */}9          <Tabs.Indicator />10        </Tabs.Tab>11      </Tabs.List>12    </Tabs.ListContainer>13    <Tabs.Panel/>14  </Tabs>15)

示例

垂直布局

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2export { Vertical } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

溢出

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

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2export { Overflow } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

禁用 Tab

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2export { Disabled } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

带分隔线

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

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2export { WithSeparator } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

次要类型

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2export { Secondary } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

次要类型（垂直）

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2export { SecondaryVertical } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

对齐方式

标签内容默认居中。使用 align 可将其对齐到 start 或 end，这在垂直的侧边栏式导航中尤其有用。单个标签仍可通过 Tabs.Tab 上的 className 覆盖。

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2export { VerticalAlignment } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

渲染函数

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac2), Apache-2.0. Native anchors supply real navigation.3import { Tabs } from "@lenso/ui";4import Link from "next/link";5import { styles } from "./source.stylex";6export function RenderFunction() {7  return (8    <Tabs9      defaultValue="getting-started"10      xstyle={styles.root}11      render={(props) => <div {...props} data-custom="foo" />}12    >13      <Tabs.ListContainer>14        <Tabs.List aria-label="Options">15          <Tabs.Tab16            value="getting-started"17            nativeButton={false}18            render={<Link href="/docs/react/getting-started" />}19          >20            Getting Started21          </Tabs.Tab>22          <Tabs.Tab23            value="components"24            nativeButton={false}25            render={<Link href="/docs/react/components" />}26          >27            Components28          </Tabs.Tab>29          <Tabs.Tab30            value="releases"31            nativeButton={false}32            render={<Link href="/docs/react/releases" />}33          >34            Releases35          </Tabs.Tab>36          <Tabs.Indicator />37        </Tabs.List>38      </Tabs.ListContainer>39      <Tabs.Panel value="overview" xstyle={styles.panel}>40        <p>View your project overview and recent activity.</p>41      </Tabs.Panel>42      <Tabs.Panel value="analytics" xstyle={styles.panel}>43        <p>Track your metrics and analyze performance data.</p>44      </Tabs.Panel>45      <Tabs.Panel value="reports" xstyle={styles.panel}>46        <p>Generate and download detailed reports.</p>47      </Tabs.Panel>48    </Tabs>49  );50}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

自定义样式

Tailwind CSS

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2export { CustomStyles } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

全局 CSS

若要自定义组件类，可使用 @layer components 指令。了解更多。

1@layer components {2  .tabs__list {3    @apply rounded-xl border border-border bg-surface p-1;4  }5
6  .tabs__tab {7    @apply rounded-lg font-medium;8  }9
10  .tabs__indicator {11    @apply rounded-lg bg-foreground shadow-sm;12  }13
14  .tabs--secondary > .tabs__list-container > .tabs__list {15    @apply border-b border-border bg-transparent p-0;16  }17
18  .tabs--secondary > .tabs__list-container .tabs__indicator {19    @apply rounded-none bg-accent;20  }21}

样式参考

HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。

CSS 类

Tabs 组件使用以下 CSS 类（查看源码样式）：

基础类 [!toc]

.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 - 标签指示器

方向属性 [!toc]

.tabs[data-orientation="horizontal"] - 水平标签布局（默认）
.tabs[data-orientation="vertical"] - 垂直标签布局

变体类 [!toc]

.tabs--secondary - 次要类型变体，使用下划线指示器

对齐类 [!toc]

.tabs--align-start - 标签内容对齐到起始侧
.tabs--align-end - 标签内容对齐到结束侧

交互状态

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

Selected：[aria-selected="true"]
Hover：:hover 或 [data-hovered="true"]
Focus：:focus-visible 或 [data-focus-visible="true"]
Disabled：[aria-disabled="true"]

API 参考

Tabs

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

Tabs.List

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

Tabs.Tab

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

Tabs.Separator

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

Tabs.Panel

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

Tabs 标签页

用法

组件结构

示例

垂直布局

溢出

禁用 Tab

带分隔线

次要类型

次要类型（垂直）

对齐方式

渲染函数

自定义样式

Tailwind CSS

全局 CSS

样式参考

CSS 类

基础类 [!toc]

方向属性 [!toc]

变体类 [!toc]

对齐类 [!toc]

交互状态

API 参考

Tabs

Tabs.List

Tabs.Tab

Tabs.Separator

Tabs.Panel

相关案例

相关组件