Yugen UI

HoverCard

HoverCard hiển thị bản xem trước nội dung phía sau một liên kết khi người dùng trỏ chuột vào.

Dành cho người dùng chuột muốn xem nhanh hồ sơ, kho mã, tài liệu… trước khi mở. Bề mặt dùng chung class với Popover (shadow-16, rounded-medium). Nội dung chỉ mang tính bổ sung vì người dùng bàn phím / cảm ứng có thể không thấy.
Bản thiết kế đã được duyệt bởi @an

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX
// npm install yugen-uiimport { HoverCard, HoverCardTrigger, HoverCardContent } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

yugen-ui/components

Độ trễ, vị trí & mũi tên

openDelay / closeDelay (ms), side, withArrow.

Cách dùng

Nên
  • Dùng cho xem trước nội dung của liên kết (hồ sơ, tài liệu, kho mã).
  • Giữ nội dung ngắn, có thể đọc lướt.
Không nên
  • Không đặt hành động quan trọng chỉ có trong HoverCard — bàn phím / cảm ứng khó truy cập.
  • Không dùng thay cho Tooltip (nhãn ngắn) hay Popover (nội dung tương tác khi bấm).

Props

Prop · KiểuMặc địnhMô tả
HoverCard.openDelay / closeDelaynumberMặc định: 700 / 300Độ trễ mở / đóng (ms).
HoverCard.open / onOpenChangeboolean / (open) => voidMặc định: —Điều khiển trạng thái.
HoverCardContent.side / align"top" | "right" | "bottom" | "left" / "start" | "center" | "end"Mặc định: "bottom" / "center"Vị trí so với trigger.
HoverCardContent.withArrowbooleanMặc định: falseHiện mũi tên.