React 组件

UGTabs 标签页

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

导入方式

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

tsx

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

变体预览

基础标签页切换。

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

状态展示

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

当前标签：overview

尺寸与变体

使用语义属性控制标签密度和视觉形式，不需要修改 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>
  )
}

属性

属性	类型	默认值	说明
value	string	—	当前激活的标签页值。
onValueChange	(value: string) => void	—	切换标签页时触发。
size	'sm' \| 'md' \| 'lg'	'md'	统一控制标签高度、字号和水平内边距。
variant	'default' \| 'pill'	'default'	选择下划线或胶囊式标签列表。
UGTabsTrigger.value	string	—	与对应 UGTabsContent 的 value 对应。
UGTabsContent.value	string	—	内容面板标识；非活动面板保留在 DOM 中并使用 hidden 隐藏，保证 ARIA 关联和内部状态稳定。