HoverCard 悬浮卡片

悬停时展示的预览卡片

何时使用

  • 鼠标悬停时展示更多详情时。

导入

import { HoverCard, HoverCardTrigger, HoverCardContent } from "@reglow/reui";

HoverCard 接收 reka-ui HoverCardRoot 的全部 props（如 open-delay、close-delay）。

基础用法

鼠标悬浮

鼠标悬浮在触发元素上时弹出卡片，用于展示额外信息、预览内容等。

<script setup lang="ts">
import { HoverCard, HoverCardTrigger, HoverCardContent, Avatar } from "@reglow/reui";
</script>

<template>
  <HoverCard>
    <HoverCardTrigger as-child>
      <a href="#" class="text-primary underline">查看用户</a>
    </HoverCardTrigger>
    <HoverCardContent>
      <div class="flex gap-3">
        <Avatar>
          <span class="text-sm">R</span>
        </Avatar>
        <div>
          <h4 class="text-sm font-semibold">Reglow</h4>
          <p class="text-sm text-muted-foreground">组件库</p>
        </div>
      </div>
    </HoverCardContent>
  </HoverCard>
</template>

弹出方向

通过 side 控制弹出方向。

<template>
  <HoverCard>
    <HoverCardTrigger as-child>
      <Button variant="link">悬浮查看</Button>
    </HoverCardTrigger>
    <HoverCardContent side="top" class="w-80">
      <p class="text-sm">从上方弹出的内容</p>
    </HoverCardContent>
  </HoverCard>
</template>

API

HoverCard Props

参数说明类型默认值
open是否展开（v-model:open）booleanfalse
defaultOpen默认是否展开booleanfalse
openDelay打开延迟（ms）number700
closeDelay关闭延迟（ms）number300

HoverCardContent Props

参数说明类型默认值
side弹出方向"top" | "right" | "bottom" | "left""bottom"
sideOffset侧边偏移（px）number4
class附加类名string-

组件组成

组件说明
HoverCard根容器（reka-ui HoverCardRoot props）
HoverCardTrigger触发器，支持 as-child
HoverCardContent内容面板，默认宽度 w-64
Empty 空状态
Empty 空状态
ImageViewer 图片预览
可点击放大的图片与预览组