React 组件

UGSwitch 开关

UGSwitch 用于布尔值切换，常见于系统设置、权限与偏好配置。

导入方式

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

tsx

import { UGSwitch } from '@ug666/ui-react'

变体预览

基础开关与左侧标签布局。

启用自动保存深色模式

状态展示

禁用态与当前状态值展示。

只读配置自动保存：开启

尺寸展示

UGSwitch 本身为固定尺寸，通常通过标签字号与行高控制密度。

紧凑表单标准表单

代码示例

推荐用受控模式同步业务状态。

tsx

import { useState } from 'react'
import { UGSwitch } from '@ug666/ui-react'

export function NotificationSwitch() {
  const [enabled, setEnabled] = useState(true)

  return (
    <UGSwitch
      checked={enabled}
      onCheckedChange={setEnabled}
      label="邮件通知"
    />
  )
}

Props

属性	类型	默认值	说明
checked	boolean	—	当前选中状态。
onCheckedChange	(checked: boolean) => void	—	切换开关时触发。
label	string	—	开关标签文本。
labelPlacement	'left' \| 'right'	'right'	控制标签文字位置。