UG666

UG666 UI
@ug666/react 文档演示

Popover 浮层

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

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Popover, PopoverTrigger, PopoverContent } from '@ug666/react'

四方向演示

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

对齐方式

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

带表单的浮层

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

代码示例

Popover 无需手动管理 open 状态，内部自动处理点击外部关闭逻辑。

import { Button, Popover, PopoverTrigger, PopoverContent } from '@ug666/react'

export function UserCard() {
  return (
    <Popover>
      <PopoverTrigger>
        <Button variant="outline">查看资料</Button>
      </PopoverTrigger>
      <PopoverContent 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>
      </PopoverContent>
    </Popover>
  )
}

Props 说明

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