Card
ظرفی محتوایی برای گروهبندی اطلاعات مرتبط، متشکل از چند زیرکامپوننت قابلترکیب.
این کامپوننت فعلاً برای ۱ فریمورک از ۴ فریمورک آماده است.
آخرین ورود: امروز، ساعت ۱۰:۳۰
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
نصب
با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگیها و فایلها خودکار اضافه میشوند.
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/card.jsonnpx dig-ui@latest add https://design-system-tau-green.vercel.app/r/card.jsonyarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/card.jsonbunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/card.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
استفاده
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card"
<Card>
<CardHeader>
<CardTitle>عنوان</CardTitle>
<CardDescription>توضیح کوتاه</CardDescription>
</CardHeader>
<CardContent>محتوا</CardContent>
</Card>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
ترکیب اجزا
Card از شش زیرکامپوننت تشکیل شده: CardHeader، CardTitle، CardDescription، CardAction، CardContent و CardFooter.
فقط بخشهایی را که نیاز دارید رندر کنید؛ فاصلهگذاری بهصورت خودکار تنظیم میشود.
دسترسپذیری
- CardTitle خودش یک تگ heading نیست؛ اگر Card بخشی مستقل از صفحه است، یک سطح heading مناسب (h2, h3, ...) به آن اضافه کنید.
- ترتیب DOM عناصر با ترتیب منطقی خواندن مطابقت دارد، حتی وقتی CardAction با گرید در گوشهٔ مقابل قرار میگیرد.
مرجع API
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| Card / CardHeader / CardTitle | React.ComponentProps<"div"> | — | هر زیرکامپوننت یک div ساده با کلاسهای از پیش تعریفشده است. |
| CardAction | React.ComponentProps<"div"> | — | در گوشهٔ مقابل عنوان (سمت چپ در RTL) قرار میگیرد؛ مناسب برای دکمه یا نشان وضعیت. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
نمونهها
Simple Card
۱۲,۴۰۰
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
خالی (Empty)
کارتِ خالی نباید فقط عنوان داشته باشد. بگویید چه چیزی قرار است اینجا بیاید و کِی؛ همین یک جمله تفاوت «هنوز چیزی نیست» با «خراب است» را روشن میکند.
هنوز فعالیتی ثبت نشده
با اولین تغییر، تاریخچه همینجا ساخته میشود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
در حال دریافت (Loading)
ساختار کارت را نگه دارید و فقط محتوا را با جای خالی عوض کنید. اگر کل کارت را با یک بلوک خاکستری جایگزین کنید، موقع رسیدن داده کل چیدمان میپرد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
عنوان بلند (Overflow)
با line-clamp عنوان در دو سطر بسته میشود و کارتهای کنار هم در گرید همارتفاع میمانند. بدون آن، یک عنوان بلند ارتفاع کل ردیف را عوض میکند.
با line-clamp عنوان در دو سطر بسته میشود و کارتهای کنار هم در یک گرید، همارتفاع میمانند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار میآید |
|---|---|
| Simple Card | ویجت آماری کوچک در داشبورد که فقط یک عدد و توضیح کوتاه لازم دارد |
| خالی (Empty) | کارت آمار یا تاریخچه پیش از اولین داده |
| در حال دریافت (Loading) | کارتهای داشبورد که هرکدام جدا داده میگیرند |
| عنوان بلند (Overflow) | گرید کارتها با عنوانهایی به طولهای مختلف |
دستورالعمل استفاده
CardAction برای یک کنترل کوتاه
انجام بده
CardAction در گوشهٔ مقابل عنوان جا میگیرد؛ برای یک نشان وضعیت یا یک دکمهٔ کوچک مناسب است.
حساب شما در تاریخ امروز فعال شد و تا پایان سال اعتبار دارد.
انجام نده
گذاشتن یک توضیح بلند داخل CardAction از گرید فشردهٔ هدر بیرون میزند؛ آن گرید برای متن کوتاه طراحی شده نه پاراگراف.
فقط بخشهای لازم را رندر کنید
۱۲,۴۰۰
بازدید ۲۴ ساعت گذشته
انجام بده
اگر کارت هدر یا پاصفحه لازم ندارد، همان زیرکامپوننتهای موردنیاز را بگذارید؛ فاصلهگذاری بین اجزا خودکار درست میشود.
۱۲,۴۰۰
بازدید ۲۴ ساعت گذشته
انجام نده
اضافهکردن CardHeader یا CardFooter خالی وقتی محتوایی برای آنها ندارید، فاصلهٔ خالی بیدلیل داخل کارت میسازد.