React 组件

UGPopover 浮层

UGPopover 用于在触发元素附近显示浮动内容，支持四方向定位、边界翻转与平滑离场，点击外部自动关闭。

导入方式

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

tsx

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

四方向演示

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>
  )
}

属性

属性	类型	默认值	说明
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）。