组件 · 导航

Tabs 标签页

标签切换：TabsList/Trigger/Panel；尺寸与变体见 tabs-options。

入口 @selrux/ui/tabs · 源码 src/components/tabs/index.ts · 9 个组件 · 发布状态 preview

使用建议

避免：杜撰 tabPosition 未导出值
限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造

引入

tsx

123456789import {
  Tabs,
  TabsAdd,
  TabsClose,
  TabsDragHandle,
  TabsExtra,
  TabsList,
  // …共 9 个导出
} from '@selrux/ui/tabs';

演练场

调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。

options 固定为三页签配置式示例。

orientation：主轴，默认 horizontal。listPlacement：List 相对面板位置，默认 before。activationMode：键盘激活模式，默认 manual。selectTrigger：指针选择触发，默认 click。dir：同步 DOM 方向；未传时继承。dragTarget：排序承接目标，默认 handle。listLabellistLabelledBysize：显式尺寸优先于 Provider，最终回退 md。variant：外观变体，默认 line。shape：触发器形状，默认 square。fill：填充方式，默认 auto。

个人资料内容

代码演示

配置式

options 传入 value / label / content，listLabel 为页签列表的无障碍名称。

个人资料内容

组合式

TabsList + TabsTrigger + TabsPanel 自由组合。

概览内容

外观

variant 为 line / card / segment，shape 为 square / rounded。

按日统计

按周统计

受控、方向与激活方式

value / onValueChange 受控；orientation="vertical"；activationMode 为 automatic 时方向键即切换；selectTrigger="hover" 悬停切换；loop 首尾循环；dir 方向。

姓名、部门、手机号

value = basic

listPlacement="after"：页签在内容下方。

可增删与排序

addable 显示新增按钮（onAdd），closable 显示关闭（onClose），sortable 允许拖拽排序（dragTarget 为 trigger 或 handle）；TabsTrigger 也可单独设 closable / sortable。

工作台的内容

尺寸、铺满与滚动

size；fill="full" 页签平分宽度；showIndicator 控制激活指示条；showScrollButton 在溢出时显示滚动按钮（TabsScrollButton 的 direction）；TabsExtra 的 placement 放置附加操作。

全部订单

分组：

分组 1 内容

API

属性覆盖：示例用到 31 / 34 个自有属性（91.2%）

由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。

Tabs.styles：语义 slot 内联样式，与 className/style 同类的样式逃生口，不单独演示
TabsPanel.styles：语义 slot 内联样式，与 className/style 同类的样式逃生口，不单独演示
TabsTrigger.sortableBind：拖拽绑定由 Tabs sortable 在内部注入，不由调用方传入
TabsTrigger.styles：语义 slot 内联样式，与 className/style 同类的样式逃生口，不单独演示

Tabs

styled Tabs：解析尺寸与外观，把 options 展开为 styled 子树后交给行为层；选择、增删、排序状态不在此处维护第二份。库基础类名通过 classNames 传入行为层。

属性	说明	类型	默认值
`value`	-	`string \| null`	-
`defaultValue`	-	`string \| null`	-
`onValueChange`	用户选择不同启用项时通知；同值、prop 更新与集合静默修复不调用。	`((value: string) => void)`	-
`orientation`	主轴，默认 horizontal。	`"horizontal" \| "vertical"`	`horizontal`
`listPlacement`	List 相对面板位置，默认 before。	`"before" \| "after"`	`before`
`activationMode`	键盘激活模式，默认 manual。	`"manual" \| "automatic"`	`manual`
`selectTrigger`	指针选择触发，默认 click。	`"hover" \| "click"`	`click`
`loop`	方向键首尾循环，默认 true。	`boolean`	`true`
`dir`	同步 DOM 方向；未传时继承。	`"ltr" \| "rtl"`	-
`destroyOnHidden`	隐藏时是否卸载 Panel 内容，默认 false（保活）。	`boolean`	-
`addable`	显示添加按钮；点击只调 onAdd，不自动插入项。	`TabsAddable`	-
`closable`	组默认是否显示关闭按钮；项/option 可覆盖。	`boolean`	-
`onAdd`	用户激活添加按钮后调用；宿主负责追加项。	`(() => void)`	-
`onClose`	用户关闭某项时调用；宿主负责从集合移除。	`((value: string) => void)`	-
`sortable`	开启排序组合模式；不安装任何 DnD。	`boolean`	-
`dragTarget`	排序承接目标，默认 handle。	`"trigger" \| "handle"`	`handle`
`onReorder`	宿主在外部 DnD 结束后调用的完整新顺序；库自身不调用，仅存入上下文。	`((orderedValues: readonly string[]) => void)`	-
`classNames`	语义 slot → className，仅对象形式。	`Partial<Record<TabsSemanticSlot, string>>`	-
`styles`	语义 slot → style，仅对象形式。	`Partial<Record<TabsSemanticSlot, CSSProperties>>`	-
`options`	-	`readonly TabsOption[]`	-
`listLabel`	-	`string`	-
`listLabelledBy`	-	`string`	-
`extraStart`	-	`ReactNode`	-
`extraEnd`	-	`ReactNode`	-
`size`	显式尺寸优先于 Provider，最终回退 md。	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	-
`variant`	外观变体，默认 line。	`"line" \| "card" \| "segment"`	`line`
`shape`	触发器形状，默认 square。	`"square" \| "rounded"`	`square`
`fill`	填充方式，默认 auto。	`"auto" \| "full"`	`auto`
`showIndicator`	是否渲染底边指示线；line 默认 true，card 默认 false；不影响 segment 的共享选中表面。	`boolean`	`true`
`showScrollButton`	溢出时显示 prev/next 滚动按钮，默认 false。	`boolean`	`false`
`children`	-	`ReactNode`	-

另有 277 项原生属性与事件继承自 HTMLAttributes，原样透传。

TabsAdd

Add 公开导出（带扫描种类标记）。

无自有属性；其余 288 项原生属性继承自 ButtonHTMLAttributes / HTMLAttributes。

TabsClose

styled Close：类名由根传入的语义 classNames 落点，行为全部在行为层。

无自有属性；其余 286 项原生属性继承自 ButtonHTMLAttributes / HTMLAttributes。

TabsDragHandle

styled DragHandle：类名由根传入的语义 classNames 落点，行为全部在行为层。

无自有属性；其余 287 项原生属性继承自 ButtonHTMLAttributes / HTMLAttributes。

TabsExtra

Extra 公开导出（带扫描种类标记）。

属性	说明	类型	默认值
`placement`	位置，默认 end。	`"start" \| "end"`	`end`

另有 280 项原生属性与事件继承自 HTMLAttributes，原样透传。

TabsList

List 公开导出（带扫描种类标记）。

无自有属性；其余 278 项原生属性继承自 HTMLAttributes。

TabsPanel

Panel 公开导出（带扫描种类标记）。

属性	说明	类型	默认值
`value` *	选择标识；与同 value 的 Trigger 一一对应。	`string`	-
`destroyOnHidden`	覆盖 Root/option 的 destroyOnHidden。	`boolean`	-
`classNames`	本项语义 class，与 Root 对应 slot 合并。	`Partial<Record<TabsSemanticSlot, string>>`	-
`styles`	本项语义 style，与 Root 对应 slot 合并。	`Partial<Record<TabsSemanticSlot, CSSProperties>>`	-

另有 276 项原生属性与事件继承自 HTMLAttributes，原样透传。

TabsScrollButton

styled ScrollButton：类名由根传入的语义 classNames 落点，行为全部在行为层。

属性	说明	类型	默认值
`direction` *	滚动方向。	`"next" \| "prev"`	-

另有 288 项原生属性与事件继承自 ButtonHTMLAttributes / HTMLAttributes，原样透传。

TabsTrigger

Trigger 公开导出（带扫描种类标记）。

属性	说明	类型	默认值
`value` *	选择标识；与同 value 的 Panel 一一对应。	`string`	-
`disabled`	跳过导航与选择；关闭与拖拽柄也禁用。	`boolean`	-
`closable`	是否渲染 Close，默认继承 Root.closable。	`boolean`	-
`sortable`	是否接受排序绑定，默认继承 Root.sortable。	`boolean`	-
`sortableBind`	外部 DnD 绑定；按 dragTarget 落到柄或按钮。	`TabsSortableBind`	-
`classNames`	本项语义 class，与 Root 对应 slot 合并。	`Partial<Record<TabsSemanticSlot, string>>`	-
`styles`	本项语义 style，与 Root 对应 slot 合并。	`Partial<Record<TabsSemanticSlot, CSSProperties>>`	-
`children`	短名称/装饰；不含链接或其它提交按钮。	`ReactNode`	-

另有 281 项原生属性与事件继承自 ButtonHTMLAttributes / HTMLAttributes，原样透传。

导出类型：TabsActivationMode、TabsAddProps、TabsClassNames、TabsCloseProps、TabsControlledProps、TabsDragHandleProps、TabsDragTarget、TabsExtraProps、TabsFill、TabsListPlacement、TabsListProps、TabsOption、TabsOrientation、TabsPanelProps、TabsProps、TabsScrollButtonProps、TabsSelectTrigger、TabsSemanticSlot、TabsShape、TabsSize、TabsSortableBind、TabsStyles、TabsTriggerProps、TabsUncontrolledProps、TabsVariant、TabsVisualProps

摘自源码 JSDoc。

Tabs.activationMode：键盘激活模式，默认 manual。
Tabs.loop：方向键首尾循环，默认 true。