Popover 气泡卡片

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

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

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

<template>
  <Popover v-model:open="open">
    <PopoverTrigger as-child>
      <Button variant="outline">点击打开</Button>
    </PopoverTrigger>
    <PopoverContent class="w-80">
      <div class="grid gap-4">
        <div class="space-y-2">
          <h4 class="font-medium leading-none">尺寸</h4>
          <p class="text-sm text-muted-foreground">设置弹层的尺寸。</p>
        </div>
      </div>
    </PopoverContent>
  </Popover>
</template>

<template>
  <Popover>
    <PopoverTrigger as-child>
      <Button variant="outline">上方弹出</Button>
    </PopoverTrigger>
    <PopoverContent side="top" align="center">
      <p class="text-sm">从上方弹出</p>
    </PopoverContent>
  </Popover>
</template>

<template>
  <Popover>
    <PopoverTrigger as-child>
      <Button variant="outline">设置宽度</Button>
    </PopoverTrigger>
    <PopoverContent class="w-80">
      <div class="grid gap-4">
        <div class="space-y-2">
          <h4 class="font-medium leading-none">宽度</h4>
          <p class="text-sm text-muted-foreground">设置元素的宽度。</p>
        </div>
        <div class="grid gap-2">
          <Input placeholder="100px" />
          <Button size="sm">应用</Button>
        </div>
      </div>
    </PopoverContent>
  </Popover>
</template>