Tabs

Tabs 用于在同一上下文中切换不同内容面板。组件基于 Radix Tabs 封装，提供数据驱动的 Tabs 主组件，也导出 Root、List、Trigger、Content 等结构组件用于手动组合。

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsRoot,
  TabsTrigger
} from '@skyroc/web-ui';

何时使用

• 多组内容属于同一层级，需要在同一空间内切换展示。
• 选项数量较少，用户需要快速切换内容面板。
• 需要横向或纵向组织内容导航。
• 只需要切换一个轻量选项、不展示内容面板时使用 Segment。

基础用法

通过 items 定义 tab 触发项和内容。每个 item 需要唯一 value，label 会渲染为触发项，children 会渲染为内容面板。

<Tabs
  defaultValue="tab-1"
  items={[
    { value: 'tab-1', label: 'Tab 1', children: 'Content 1' },
    { value: 'tab-2', label: 'Tab 2', children: 'Content 2' }
  ]}
/>

纵向布局

通过 orientation="vertical" 切换为纵向布局。纵向布局会让列表和内容横向排列，列表内部触发项垂直排列。

<Tabs
  items={items}
  orientation="vertical"
/>

填充方式

通过 fill 控制根容器的布局伸展方式。auto 让列表按内容宽度展示，full 让根容器按可用空间伸展。

<Tabs
  fill="auto"
  items={items}
/>

形状

通过 shape 控制列表和激活指示器的圆角。

尺寸

通过 size 调整字号、间距和触发项尺寸，从 xs 到 2xl 共 6 个尺寸。

样式类型

通过 type="line" 使用线性 tab 样式。默认 pill 类型使用背景块和滑动指示器。

<Tabs
  items={items}
  type="line"
/>

自定义渲染

使用 renderTrigger 和 renderContent 可以自定义触发项和内容。回调会收到 active 和当前 item。

<Tabs
  items={items}
  renderTrigger={({ active, item }) => (
    <span>{item.label}{active ? ' *' : ''}</span>
  )}
  renderContent={({ item }) => item.children}
/>

API

Tabs

主组件基于 Radix Tabs Root，使用 items 自动渲染 TabsList、TabsTrigger 和 TabsContent。

结构组件

需要完全控制 DOM 结构时，可以使用结构组件手动组合。

类型