Hover Card 悬停卡片

让用户预览链接背后的内容。悬停 700 毫秒后打开（鼠标 / 触控板），指针停留在卡片上时保持打开；触屏上点按切换。

基础用法

SHoverCard() {
  SHoverCardTrigger() { SButton({ text: '@nextjs', variant: 'link' }) }
  SHoverCardContent() {
    Row({ space: 16 }) {
      SAvatar({ fallback: 'VC' })
      Column({ space: 4 }) {
        Text('@nextjs')
        Text('The React Framework – created and maintained by @vercel.')
        Text('Joined December 2021')
      }
    }
  }
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SHoverCard

shadcn-vue 的 HoverCard：位于链接背后的预览内容。

• 指针：在触发器上悬停 openDelay 毫秒后打开，指针同时离开触发器与卡片后 closeDelay 毫秒关闭（移动到卡片上会保持打开）
• 触控：点按触发器切换显示（点击外部关闭），与 Popover 相同

属性	类型	默认值	说明
openDelay	number	700
closeDelay	number	300
open!!	boolean | undefined	undefined
defaultOpen	boolean	false

事件	类型	默认值	说明
onOpenChange	(open: boolean) => void	() => { }

插槽: 子组件（尾随闭包）

SHoverCardTrigger

悬停（指针）或点按（触控）的目标；其边界即为锚点。

插槽: 子组件（尾随闭包）

SHoverCardContent

锚定的卡片：bg-popover w-64 rounded-md border p-4 shadow-md。

属性	类型	默认值	说明
side	SparkSide SparkSide = 'top' | 'right' | 'bottom' | 'left'	'bottom'
alignment	SparkAlign SparkAlign = 'start' | 'center' | 'end'	'center'
sideOffset	number	4
panelWidth	number	256	卡片宽度，单位 vp（shadcn 的 w-64 = 256）

插槽: 子组件（尾随闭包）