Popover 气泡卡片

基于 reka-ui 的浮层容器，用于承载自定义内容（表单、详情、操作列表等）。

何时使用

  • 需要悬浮气泡展示内容时。

基础用法

<script setup lang="ts">
import { ref } from "vue";
import { Popover, PopoverTrigger, PopoverContent, Button } from "@reglow/reui";

const open = ref(false);
</script>

<template>
  <Popover v-model:open="open">
    <PopoverTrigger as-child>
      <Button variant="outline">打开气泡</Button>
    </PopoverTrigger>
    <PopoverContent class="w-80">
      <p class="text-sm">任意自定义内容。</p>
    </PopoverContent>
  </Popover>
</template>

导入

import { Popover, PopoverTrigger, PopoverContent } from "@reglow/reui";

Props（Popover）

属性类型默认值说明
openboolean-打开状态（v-model:open）

其余 props 透传至 reka-ui PopoverRoot。

ImageViewer 图片预览
可点击放大的图片与预览组
PricingTable 价格表
用于展示不同订阅方案/套餐的对比价格表，桌面端为表格布局、移动端自动切换为卡片列表，支持高亮推荐方案与自定义插槽。