Product Cardv1.1.0
کارتِ یک محصول برای فروشگاه و کاتالوگ. اندازه‌اش ثابت است: sm ۱۶۰، md ۲۰۰ و lg ۲۴۰ پیکسل. size هم‌زمان عرض، فاصلهٔ داخلی و اندازهٔ قیمت را تعیین می‌کند تا کارت در گرید کش نیاید و بزرگ دیده نشود. برای چیدنِ چند کارت از ProductCardGrid استفاده کنید.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/product-card.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/product-card.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/product-card.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/product-card.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import {
ProductCard,
ProductCardGrid,
ProductCardMedia,
ProductCardBadge,
ProductCardAction,
ProductCardBody,
ProductCardTitle,
ProductCardPrice,
ProductCardFooter,
} from "@/components/ui/product-card"این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
ProductCardMedia قابِ تصویر با نسبتِ ثابت (مربع یا aspect="portrait" برای پوشاک) است؛ بدونِ فرزند جای‌نگهدار نشان می‌دهد. ProductCardBadge در گوشهٔ شروع و ProductCardAction در گوشهٔ پایان می‌نشیند.
ProductCardTitle حداکثر دو خط است و ProductCardPrice به پایینِ بدنه می‌چسبد؛ پس قیمتِ کارت‌های یک ردیف حتی با عنوانِ کوتاه و بلند هم‌تراز می‌ماند.
ProductCardGrid در گوشی دو ستون است و از عرضِ sm به بعد هر ستون حداقل به اندازهٔ size؛ ستون‌های بیشتر جا می‌شوند به‌جای این‌که کارت‌ها پهن شوند.
دسترس‌پذیری
- هر کارت یک article با عنوانِ h3 است؛ صفحه‌خوان فهرستِ محصولات را با پرش بین عنوان‌ها مرور می‌کند.
- دکمهٔ علاقه‌مندی aria-pressed و برچسبِ شاملِ نام محصول دارد («افزودن کولهٔ چرمی به علاقه‌مندی‌ها»)، نه فقط یک قلب.
- قیمتِ قبلی داخلِ تگِ s است تا صفحه‌خوان آن را قیمتِ حذف‌شده بخواند؛ درصدِ تخفیف به‌صورتِ متن هم هست، نه فقط رنگ.
مرجع API
ProductCard
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | عرضِ ۱۶۰ / ۲۰۰ / ۲۴۰ پیکسل همراه با فاصلهٔ داخلی و اندازهٔ قیمت. |
| variant | "default" | "overlay" | "default" | overlay: تصویرِ تمام‌کارت با متنِ سفید روی سایه‌روشنِ پایین. |
| orientation | "vertical" | "horizontal" | "vertical" | horizontal: تصویرِ کوچک در شروع، اطلاعات وسط، ProductCardFooter در پایان؛ برای سبد خرید و فهرست سفارش. عرضِ تمام. |
ProductCardGrid
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | حداقلِ عرضِ هر ستون از sm به بعد؛ زیرِ آن ستون‌های ۱۵۲ پیکسلی (گوشی دو ستون). |
ProductCardMedia
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| aspect | "square" | "portrait" | "square" | نسبتِ تصویر؛ portrait سه به چهار برای پوشاک. |
ProductCardPrice
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| amount | React.ReactNode | — | قیمتِ نهایی، قالب‌بندی‌شده با formatCurrency. |
| originalAmount | React.ReactNode | — | قیمتِ قبل از تخفیف با خطِ میانی. |
| discount | React.ReactNode | — | درصدِ تخفیف کنارِ قیمتِ قبلی، مثل «٪۲۰». |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
سه اندازه
sm برای فهرستِ افقی و محصولاتِ مرتبط، md برای گریدِ فروشگاه، lg برای محصولِ ویژه.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
گریدِ فروشگاه
دکمهٔ افزودن بعد از کلیک به شمارنده تبدیل می‌شود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
فهرستِ افقی
size="sm" در یک ردیفِ اسکرول‌خور؛ عرضِ کارت ثابت می‌ماند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
افقی (ردیفِ سبد خرید)
orientation="horizontal"؛ در موبایل ProductCardFooter زیرِ اطلاعات می‌رود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
تصویرِ تمام‌کارت (overlay)
variant="overlay": تصویر کلِ کارت را می‌پوشاند و متن، امتیاز، قیمت و دکمه‌ها سفید روی سایه‌روشنِ پایین می‌نشینند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
تنوع‌ها و دسته
ProductCardThumbs ردیفِ بندانگشتیِ رنگ‌ها را زیرِ تصویر می‌گذارد (بیشتر از max با «+n»)؛ ProductCardCategory دسته را بالای عنوان.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
بدونِ تصویر
ProductCardMedia بدونِ فرزند جای‌نگهدار نشان می‌دهد؛ برای حالتِ بارگذاری یا محصولِ بی‌عکس.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| سه اندازه | sm برای فهرستِ افقی و محصولاتِ مرتبط، md برای گریدِ فروشگاه، lg برای محصولِ ویژه. |
| گریدِ فروشگاه | صفحهٔ دسته‌بندی و نتایجِ جست‌وجو |
| فهرستِ افقی | محصولاتِ مرتبط زیرِ صفحهٔ محصول |
| افقی (ردیفِ سبد خرید) | سبد خرید، فهرستِ سفارش، علاقه‌مندی‌ها |
| تصویرِ تمام‌کارت (overlay) | ویترینِ صفحهٔ اصلی، محصولِ ویژه |
| تنوع‌ها و دسته | کفش و پوشاک با چند رنگ |
| بدونِ تصویر | ProductCardMedia بدونِ فرزند جای‌نگهدار نشان می‌دهد؛ برای حالتِ بارگذاری یا محصولِ بی‌عکس. |
دستورالعمل استفاده
اندازهٔ استاندارد، نه کشیده
انجام بده
کارت‌ها را در ProductCardGrid بچینید تا با عرضِ صفحه تعدادِ ستون بیشتر شود و کارت در همان اندازه بماند.
انجام نده
کارتِ دست‌ساز در grid-cols-3 روی صفحهٔ پهن تا ۳۰۰ پیکسل کش می‌آید و تصویرِ مربعی‌اش صفحه را پر می‌کند.