Tabs
tabs选项卡 · Base UI 无浮层 + underline/solid 滑块
用法
基础用法
TabsList 装 TabsTab，每个 TabsPanel 用 value 与之对应；defaultValue 设初始选中页。
管理你的账户资料与偏好设置。
tsx
<Tabs defaultValue="account" className="w-80">
<TabsList>
<TabsTab value="account">账户</TabsTab>
<TabsTab value="password">密码</TabsTab>
</TabsList>
<TabsPanel value="account">管理你的账户资料与偏好设置。</TabsPanel>
<TabsPanel value="password">在这里修改登录密码。</TabsPanel>
</Tabs>分段药丸皮肤
TabsList 加 variant="solid" 切换为分段药丸轨道，选中态由滑块平滑滑动。
账户面板。
tsx
<Tabs defaultValue="account" className="w-80">
<TabsList variant="solid">
<TabsTab value="account">账户</TabsTab>
<TabsTab value="password">密码</TabsTab>
<TabsTab value="team">团队</TabsTab>
</TabsList>
<TabsPanel value="account">账户面板。</TabsPanel>
<TabsPanel value="password">密码面板。</TabsPanel>
<TabsPanel value="team">团队面板。</TabsPanel>
</Tabs>禁用某一页
在 TabsTab 上加 disabled，该页不可点也不可键盘聚焦，其余页正常切换。
第一个面板。
tsx
<Tabs defaultValue="a" className="w-80">
<TabsList>
<TabsTab value="a">可用</TabsTab>
<TabsTab value="b" disabled>禁用</TabsTab>
<TabsTab value="c">可用</TabsTab>
</TabsList>
<TabsPanel value="a">第一个面板。</TabsPanel>
<TabsPanel value="b">不可达。</TabsPanel>
<TabsPanel value="c">第三个面板。</TabsPanel>
</Tabs>纵向排布
Tabs 加 orientation="vertical"，tab 条竖排，方向键上下切换。
通用设置。
tsx
<Tabs defaultValue="general" orientation="vertical" className="flex w-96 gap-4">
<TabsList className="flex-col items-stretch border-b-0 border-r border-border">
<TabsTab value="general">通用</TabsTab>
<TabsTab value="security">安全</TabsTab>
<TabsTab value="billing">账单</TabsTab>
</TabsList>
<div className="flex-1">
<TabsPanel value="general">通用设置。</TabsPanel>
<TabsPanel value="security">安全设置。</TabsPanel>
<TabsPanel value="billing">账单设置。</TabsPanel>
</div>
</Tabs>何时用
同一区域内切换若干并列内容面板（账户/密码/团队），内容互斥、平级、无层级。表达页面在站点中的位置用 Breadcrumb；长文内随阅读进度高亮的目录用 Anchor；有序步骤流程用 Stepper。
导入
ts
import { Tabs, TabsList, TabsTab, TabsPanel, tabsListVariants } from "@hulianui/ui"Props
Tabs 透传 Base UI Tabs.Root（value/defaultValue/onValueChange/orientation），默认非受控。皮肤变体在 TabsList 上。
Tabs（根）
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| value | any | — | 受控当前 tab |
| defaultValue | any | — | 非受控初始 tab |
| orientation | "horizontal" | "vertical" | "horizontal" | 方向 |
TabsList
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| variant | "underline" | "solid" | "underline" | 皮肤：下划滑块 / 实心药丸 |
| className | string | — | — |
TabsTab 接 value（必填）、disabled、className；TabsPanel 接 value、className。
Events
Tabs（根）
| 事件 | 类型 | 说明 |
|---|---|---|
| onValueChange | (value) => void | 切换回调（透传 Base UI Tabs.Root） |
禁忌 / 坑
- [[base-ui-tabs-indicator-slider-via-active-tab-css-vars]]：滑块靠 Base UI 写在 indicator 上的
--active-tab-*CSS 变量 + 纯 CSS transition 实现，不引动画库。坑点：激活态钩子是data-active而非data-selected，写错样式不生效；jsdom 单测无 ResizeObserver 也能跑（指示条几何不会真渲染）。
相关
Breadcrumb · Pagination · Anchor · Affix · BackTop · Stepper
Playground
管理你的账户资料与偏好设置。
<Tabs defaultValue="account">
<TabsList variant="underline">
<TabsTab value="account">账户</TabsTab>
<TabsTab value="password">密码</TabsTab>
</TabsList>
<TabsPanel value="account">…</TabsPanel>
<TabsPanel value="password">…</TabsPanel>
</Tabs>