React 组件

UGTabs 标签页

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

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGTabs, UGTabsList, UGTabsTrigger, UGTabsContent } from '@ug666/ui-react'

变体预览

基础标签页切换。

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

状态展示

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

当前标签：overview

尺寸展示

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

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

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

代码示例

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

tsx

import { useState } from 'react'
import { UGTabs, UGTabsContent, UGTabsList, UGTabsTrigger } from '@ug666/ui-react'

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

  return (
    <UGTabs value={tab} onValueChange={setTab}>
      <UGTabsList>
        <UGTabsTrigger value="profile">资料</UGTabsTrigger>
        <UGTabsTrigger value="security">安全</UGTabsTrigger>
      </UGTabsList>
      <UGTabsContent value="profile">个人资料配置</UGTabsContent>
      <UGTabsContent value="security">安全策略配置</UGTabsContent>
    </UGTabs>
  )
}

Props

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