操作与浮层@neumorphism-ui/hover-card

Hover Card

补充说明链接目标的预览卡片。不要把必要信息或操作只放在悬停内容中。原始链接仍应含义明确。

@neumorphism-ui/hover-card

Registry JSON

预览

预览个人资料

安装

npx shadcn@latest add @neumorphism-ui/hover-card

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置。

用法

Import

"use client";

import * as React from "react";
import { HoverCard, HoverCardTrigger, HoverCardContent } from "@/components/ui/hover-card";

Example

export default function Example() {
  const id = React.useId();
  return (<HoverCard><HoverCardTrigger href="#profile-preview" className="inline-flex items-center gap-3 rounded-[var(--neu-radius-control)] border border-[color:var(--neu-edge)] bg-[var(--neu-surface)] px-4 py-3 font-semibold text-[var(--foreground)] [box-shadow:var(--neu-shadow-raised-sm)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]">{"预览个人资料"} <span aria-hidden="true">↗</span></HoverCardTrigger><HoverCardContent><strong id="profile-preview">Alex Kim</strong><p>{"产品设计师 · 首尔"}</p></HoverCardContent></HoverCard>);
}

API 参考

组件	属性	类型	默认值	说明
`HoverCard`	`open / defaultOpen`	`boolean`	`—`	设置受控状态或初始状态。
`HoverCardTrigger`	`delay / closeDelay`	`number`	`—`	打开与关闭的延迟，单位为毫秒。
`HoverCardContent`	`sideOffset`	`number`	`—`	设置考虑视口边界的面板位置或间距。

预览

安装

用法

Import

Example

API 参考

无障碍