Popover.tsx

基本信息

类型: React 组件 (shadcn/ui)
路径: ./src/components/ui/popover.tsx

功能描述

气泡卡片组件，用于显示内容的浮动卡片。基于 Radix UI，支持多种对齐方式和动画效果。

导出内容

Popover - 气泡卡片根组件
PopoverTrigger - 触发器
PopoverContent - 内容容器
PopoverAnchor - 锚点元素

Props 接口

属性	类型	必填	默认值	说明
open	`boolean`	否	-	是否打开
onOpenChange	`(open: boolean) => void`	否	-	状态变化回调
...props	`React.ComponentProps<typeof PopoverPrimitive.Root>`	否	-	Radix Popover 属性

PopoverContent

属性	类型	必填	默认值	说明
align	`'start' \	'center' \	'end'`	否	`'center'`	对齐方式
sideOffset	`number`	否	`4`	与触发器的距离
className	`string`	否	-	自定义CSS类名
...props	`React.ComponentProps<typeof PopoverPrimitive.Content>`	否	-	Content属性

PopoverTrigger / PopoverAnchor

属性	类型	必填	默认值	说明
...props	`React.ComponentProps<typeof PopoverPrimitive.Trigger/Anchor>`	否	-	Radix 属性

依赖

@radix-ui/react-popover - Radix UI 气泡卡片原语
@/lib/utils - 工具函数 (cn)

使用示例

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Button } from "@/components/ui/button";

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">打开气泡卡片</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80">
    <div className="grid gap-4">
      <div className="space-y-2">
        <h4 className="font-medium leading-none">尺寸</h4>
        <p className="text-sm text-muted-foreground">
          设置物品的宽度和高度。
        </p>
      </div>
      {/* 表单内容 */}
    </div>
  </PopoverContent>
</Popover>

// 对齐方式
<Popover>
  <PopoverTrigger>触发器</PopoverTrigger>
  <PopoverContent align="start" sideOffset={8}>
    左对齐内容
  </PopoverContent>
</Popover>