React 组件

UGPopover 浮层

UGPopover 用于在触发元素附近显示浮动内容，支持四方向定位与对齐，点击外部自动关闭。

导入方式

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

tsx

import { UGPopover, UGPopoverTrigger, UGPopoverContent } from '@ug666/ui-react'

四方向演示

通过 UGPopoverContent 的 side 属性控制浮层显示方向。

对齐方式

通过 align 属性设置浮层相对触发器的对齐方式：start、center、end。

带表单的浮层

浮层内可放置复杂内容，如表单、设置项等。

代码示例

UGPopover 无需手动管理 open 状态，点击外部时自动关闭。

tsx

import { UGButton, UGPopover, UGPopoverTrigger, UGPopoverContent } from '@ug666/ui-react'

export function UserCard() {
  return (
    <UGPopover>
      <UGPopoverTrigger>
        <UGButton variant="outline">查看资料</UGButton>
      </UGPopoverTrigger>
      <UGPopoverContent side="bottom" align="center">
        <div className="space-y-1">
          <p className="text-sm font-medium text-text-primary">UG 开发者</p>
          <p className="text-xs text-text-secondary">ug@example.com</p>
        </div>
      </UGPopoverContent>
    </UGPopover>
  )
}

Props

属性	类型	默认值	说明
open	boolean	—	受控：是否显示浮层。
defaultOpen	boolean	false	非受控：默认是否显示。
onOpenChange	(open: boolean) => void	—	状态变更回调。
UGPopoverContent.side	'top' \| 'right' \| 'bottom' \| 'left'	'bottom'	浮层显示方向。
UGPopoverContent.align	'start' \| 'center' \| 'end'	'center'	浮层对齐方式。
UGPopoverContent.sideOffset	number	4	浮层与触发器的间距（px）。