Lumi UI

预览卡片

当鼠标悬停在链接上时出现的弹出层，为可视用户提供内容预览。

DocsAPI Reference

The principles of good typography remain into the digital age.

安装

pnpm dlx shadcn@latest add @lumi-ui/preview-card

基本用法

import {
  PreviewCard,
  PreviewCardTrigger,
  PreviewCardContent,
} from "@/components/ui/preview-card"
<PreviewCard>
  <PreviewCardTrigger>悬停查看</PreviewCardTrigger>
  <PreviewCardContent>
    The React Framework – created and maintained by @vercel.
  </PreviewCardContent>
</PreviewCard>

组件结构

<PreviewCard>   
  <PreviewCardTrigger />
  <PreviewCardContent />
</PreviewCard>

实用示例

PreviewCardTrigger 默认渲染为 a 标签。使用 render 属性可渲染为其他元素。