@ug666/react 文档演示

Tabs 标签页

Tabs 适合在同一上下文中切换不同内容分组，采用受控模式。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@ug666/react'

变体预览

基础标签页切换。

最近 7 天新增 18 个组件页面。

状态展示

可通过当前值与辅助标签表达状态。

当前标签：overview

尺寸展示

Tabs 常通过容器宽度与 Trigger 内边距控制视觉密度。

紧凑型：适合弹窗或设置卡片。

宽型：适合页面主内容切换。

代码示例

推荐由外部状态管理当前标签值。

import { useState } from 'react'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@ug666/react'

export function SettingsTabs() {
  const [tab, setTab] = useState('profile')

  return (
    <Tabs value={tab} onValueChange={setTab}>
      <TabsList>
        <TabsTrigger value="profile">资料</TabsTrigger>
        <TabsTrigger value="security">安全</TabsTrigger>
      </TabsList>
      <TabsContent value="profile">个人资料配置</TabsContent>
      <TabsContent value="security">安全策略配置</TabsContent>
    </Tabs>
  )
}

Props 说明

属性	类型	默认值	说明
value	string	—	当前激活的标签页值。
onValueChange	(value: string) => void	—	切换标签页时触发。
TabsTrigger.value	string	—	与对应 TabsContent 的 value 对应。
TabsContent.value	string	—	当前内容面板的标识。