用于悬浮信息卡场景的 MoriUI 组件。

导入

import { HoverCard, HoverCardArrow, HoverCardContent, HoverCardPortal, HoverCardTrigger } from 'moriui'

示例

概览

悬浮在日历时查看详情。

@example

<script setup lang="ts">
  import { Calendar, HoverCard, HoverCardContent, HoverCardTrigger } from 'moriui'
</script>

<template>
  <HoverCard>
    <HoverCardTrigger as-child>
      <a class="underline underline-offset-4" href="https://github.com/example" target="_blank">@example</a>
    </HoverCardTrigger>
    <HoverCardContent class="w-80">
      <div class="flex gap-4">
        <img class="h-12 w-12 rounded-full" alt="@example" src="https://github.com/example.png">
        <div class="grid gap-1">
          <p class="font-semibold">
            Example
          </p>
          <p class="text-sm text-muted-foreground">
            一个开源项目
          </p>
          <div class="flex items-center gap-1">
            <span class="text-xs text-muted-foreground">加入于 2024 年 1 月</span>
          </div>
        </div>
      </div>
      <div class="mt-4">
        <Calendar :month="new Date()" />
      </div>
    </HoverCardContent>
  </HoverCard>
</template>

定位

使用 side 控制卡片弹出方向。

top right bottom left

<script setup lang="ts">
  import { HoverCard, HoverCardContent, HoverCardTrigger } from 'moriui'

  const sides = ['top', 'right', 'bottom', 'left'] as const
</script>

<template>
  <div class="flex flex-wrap gap-2">
    <HoverCard v-for="side in sides" :key="side" :open-delay="0">
      <HoverCardTrigger as-child>
        <a class="underline underline-offset-4 capitalize" href="#">{{ side }}</a>
      </HoverCardTrigger>
      <HoverCardContent :side="side" class="w-64">
        <p class="text-sm">
          {{ side }} 方向的悬浮卡片
        </p>
      </HoverCardContent>
    </HoverCard>
  </div>
</template>

RTL

从右到左的悬浮卡片布局。

بطاقة التحويم

<script setup lang="ts">
  import { DirectionProvider, HoverCard, HoverCardContent, HoverCardTrigger } from 'moriui'
</script>

<template>
  <DirectionProvider dir="rtl">
    <HoverCard :open-delay="0">
      <HoverCardTrigger as-child>
        <a class="underline underline-offset-4" href="#">بطاقة التحويم</a>
      </HoverCardTrigger>
      <HoverCardContent class="w-64">
        <p class="text-sm">
          محتوى بطاقة التحويم في الاتجاه من اليمين إلى اليسار
        </p>
      </HoverCardContent>
    </HoverCard>
  </DirectionProvider>
</template>

使用说明

组合方式

HoverCard 由 Trigger、Portal、Content 与可选 Arrow 组成；通过鼠标悬浮或焦点触发。

定位

Content 的 side 与 align 控制弹出卡片的方向和对齐。

RTL

方向由 DirectionProvider 控制。

变体

HoverCardContent 的 side 与 align 来自 Reka Popper 定位。

可访问性

HoverCard 复用 Reka UI Popper 的悬浮触发，并支持键盘焦点触发。Content 内的交互元素键盘用户可通过 Tab 进入；隐藏时不应保留可聚焦元素。

API 参考

属性	类型	默认值	说明
`HoverCard v-model:open`	`boolean`	`undefined`	悬浮卡的受控打开状态。
`HoverCard defaultOpen`	`boolean`	`false`	非受控初始打开状态。
`HoverCard openDelay`	`number`	`300`	悬浮后打开延迟的毫秒数。
`HoverCard closeDelay`	`number`	`300`	离开后关闭延迟的毫秒数。
`HoverCardContent side / align`	`PopperContentProps`	`'bottom' / 'center'`	卡片方向与对齐。
`HoverCardContent sideOffset`	`number`	`4`	卡片与触发器的偏移像素。
`HoverCardArrow width / height`	`number`	`10 / 5`	箭头的宽度与高度。

Hover Card 悬浮信息卡