商品快速預覽
商品卡點開快速預覽彈窗：圖片切換、規格選擇、加入購物車。
商品卡 hover 浮現快速預覽按鈕，點擊後卡片以 layoutId morph 展開成置中彈窗：左側圖廊縮圖切換、右側顏色色票與尺寸選擇、數量調整，加入購物車後按鈕變身成功回饋，適合電商列表頁縮短購買路徑。
載入預覽⋯
安裝
npx shadcn@latest add https://webberui.com/r/product-quick-view.json或在 components.json 設定 registries 後，改用 @webberui/product-quick-view 安裝。
安裝依賴後，從 registry JSON（/r/product-quick-view.json 的 files[0].content）複製 product-quick-view.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { ProductQuickView } from "@/components/ui/product-quick-view";
<ProductQuickView
product={{
name: "輕量針織跑鞋",
price: 2680,
originalPrice: 3280,
rating: 4.5,
badge: "新品",
emoji: "👟",
colors: [
{ name: "霧灰藍", hue: 210 },
{ name: "珊瑚橘", hue: 16 },
],
sizes: ["US 8", "US 9", "US 10"],
}}
onAddToCart={({ color, size, quantity }) => {
console.log(color, size, quantity);
}}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
product | QuickViewProduct | — | 商品資料（見下表） |
onAddToCart | (selection: { color: string; size: string; quantity: number }) => void | — | 加入購物車回呼，回傳所選顏色、尺寸與數量 |
className | string | — | 透傳到卡片外層容器 |
QuickViewProduct 欄位：
| 欄位 | 型別 | 預設值 | 說明 |
|---|---|---|---|
name | string | — | 商品名稱 |
price | number | — | 售價（新台幣） |
originalPrice | number | — | 劃線原價，提供時顯示折扣百分比 |
description | string | — | 商品簡述，顯示於彈窗價格下方 |
rating | number | — | 星等評分（0–5） |
badge | string | — | 卡片角落籤條文字，例如「新品」 |
emoji | string | "🛍️" | 假商品圖中央的 emoji 圖示 |
colors | { name: string; hue: number }[] | — | 可選顏色清單，hue 產生色票與漸層假圖 |
sizes | string[] | — | 可選尺寸清單 |
可及性
- 彈窗使用
role="dialog"與aria-modal，開啟時關閉按鈕自動聚焦，按Esc或點擊遮罩皆可關閉 - 快速預覽按鈕在鍵盤
focus-visible時同樣浮現，不依賴滑鼠 hover - 色票、尺寸與縮圖按鈕皆有
aria-label或可讀文字，並以aria-pressed標示選中狀態 - 數量與加入購物車狀態以
aria-live="polite"播報變化 - 使用者系統開啟「減少動態效果」時，停用 morph 展開動畫，改為單純淡入淡出