Checkbox Cardv1.0.0
وقتی کاربر چند مورد را از یک فهرست برمی‌دارد و هر مورد بیش از یک برچسب است (عکسِ کالا، توضیح، مبلغ)، CheckboxCard کلِ مورد را یک کارتِ لمسی می‌کند. هم‌خانوادهٔ Radio Card است برای انتخابِ چندتایی؛ مربعِ داخلش همان Checkboxِ دیگ است، پس تنها یا داخلِ CheckboxGroup کار می‌کند.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/checkbox-card.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/checkbox-card.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/checkbox-card.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/checkbox-card.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { CheckboxGroup } from "@/components/ui/checkbox"
import { CheckboxCard } from "@/components/ui/checkbox-card"این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
CheckboxCard یک label است که به Checkboxِ داخلش وصل است؛ کلیک روی هر جای کارت همان کلیک روی چک‌باکس است. داخلِ CheckboxGroup فقط value می‌گیرد و آرایهٔ انتخاب‌ها، disabled و invalid از گروه می‌آید؛ تنها، با checked و onCheckedChange کنترل می‌شود.
layout="row" رسانه، متن و aside را در یک ردیف می‌چیند و چک‌باکس در انتهای ردیف است، مثلِ Radio Card؛ layout="tile" برای گرید است. children تمام‌عرض زیرِ ردیف می‌آید و کلیک رویش چک‌باکس را عوض نمی‌کند.
دسترس‌پذیری
- هر کارت label چک‌باکسِ داخلش است؛ صفحه‌خوان عنوان را نامِ گزینه و description را با aria-describedby توضیحش می‌خواند.
- هر چک‌باکس با Tab جدا در دسترس است و با Space عوض می‌شود؛ CheckboxGroup نقشِ group دارد و باید aria-label بگیرد.
- حلقهٔ فوکوس روی کلِ کارت دیده می‌شود، نه فقط روی مربعِ کوچک.
- گزینهٔ غیرفعال زمینهٔ muted و متنِ کم‌رنگ می‌گیرد، بیopacity، و دلیلش در description نوشته می‌شود.
مرجع API
CheckboxCard
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| value | string | — | مقدارِ این مورد داخلِ CheckboxGroup. |
| checked | boolean | — | حالتِ کنترل‌شده، وقتی بیرونِ CheckboxGroup است. |
| defaultChecked | boolean | false | حالتِ اولیهٔ کنترل‌نشده. |
| onCheckedChange | (checked: boolean | "indeterminate") => void | — | با هر تغییر صدا زده می‌شود. |
| title | React.ReactNode | — | عنوانِ مورد؛ نامِ دسترس‌پذیرِ چک‌باکس. اسمِ بلند با فاصلهٔ خطِ فشرده تا دو خط می‌شکند و بقیه‌اش کوتاه می‌شود. |
| description | React.ReactNode | — | توضیحِ کوتاه زیرِ عنوان؛ با aria-describedby وصل است. |
| media | React.ReactNode | — | عکسِ کالا، آیکون یا لوگو. |
| aside | React.ReactNode | — | مبلغ، تعداد یا برچسب در انتهای ردیف (فقط row). |
| layout | "row" | "tile" | "row" | ردیفی برای فهرست، کاشی برای گرید. |
| disabled | boolean | false | مورد انتخاب‌پذیر نیست؛ زمینهٔ muted بیopacity. |
| invalid | boolean | false | حاشیهٔ قرمز برای خطای فرم. |
| children | React.ReactNode | — | محتوای تمام‌عرض زیرِ مورد؛ کلیک رویش چک‌باکس را عوض نمی‌کند. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
پرداختِ گروهیِ قبض‌ها
انتخابِ همه، شمارِ انتخاب‌ها و جمعِ مبلغ روی دکمهٔ پرداخت.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
گریدِ کاشی
layout="tile" در گریدِ دو یا سه‌ستونه؛ آیکون بالا و چک‌باکس در گوشه.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
محتوای اضافه و گزینهٔ غیرفعال
children فقط برای موردِ انتخاب‌شده می‌آید؛ کلیک رویش چک‌باکس را عوض نمی‌کند. موردِ غیرفعال دلیلش را می‌گوید.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| پرداختِ گروهیِ قبض‌ها | قبض، جریمه، اقساط |
| گریدِ کاشی | اعلان‌ها، علاقه‌مندی‌ها، ویژگی‌ها |
| محتوای اضافه و گزینهٔ غیرفعال | دلیلِ مرجوعی برای هر کالا |
دستورالعمل استفاده
چندتایی با CheckboxCard، تکی با RadioCard
انجام بده
وقتی چند مورد با هم انتخاب می‌شوند (قبض‌ها، اقلامِ مرجوعی) CheckboxCard، و جمعِ انتخاب‌ها را کنارِ دکمهٔ پایانی نشان بده.
انجام نده
چک‌باکسِ کوچک کنارِ یک بلوکِ متنی که فقط خودِ مربع کلیک می‌خورد؛ یا CheckboxCard برای انتخابی که فقط یکی از آن مجاز است.