Approval Cardv1.1.0
الگویِ human-in-the-loop: پیش از اجرایِ یک اقدام، عامل چند سوالِ تک‌انتخابی از کاربر می‌پرسد. هر لحظه فقط یک سوال دیده می‌شود، دکمهٔ ادامه تا انتخاب‌نشدنِ یک گزینه غیرفعال است و روی آخرین سوال برچسبش به «تایید» تغییر می‌کند.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/approval-card.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/approval-card.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/approval-card.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/approval-card.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import {
ApprovalCard,
ApprovalCardActions,
ApprovalCardOption,
ApprovalCardOptions,
ApprovalCardProgress,
ApprovalCardQuestion,
} from "@/components/ui/approval-card"این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
ApprovalCard ریشه است و کاملاً کنترل‌شده: index، value، onValueChange، onNext و onSkip را خودِ صفحه‌ٔ مصرف‌کننده نگه می‌دارد، چون هر سوال محتوای متفاوتی دارد و فقط خودِ شما می‌دانید سوالِ بعدی چیست.
ApprovalCardOption با کلیک مقدارش را از راهِ onValueChange به بیرون می‌فرستد. ApprovalCardActions تا وقتی value خالی است دکمهٔ ادامه را غیرفعال نگه می‌دارد و در آخرین سوال برچسبش را به «تایید» تغییر می‌دهد.
دسترس‌پذیری
- فهرستِ گزینه‌ها role="radiogroup" است و هر گزینه role="radio" با aria-checked دارد.
- پیمایش با Tab بینِ گزینه‌ها ساده است، نه roving-tabindex؛ برای فهرستِ کوتاهِ ۲ تا ۴ گزینه‌ای این کامپوننت کافی است.
مرجع API
ApprovalCard
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| total | number | — | تعدادِ کلِ سوال‌ها؛ برای نقطه‌های پیشرفت. |
| index | number | — | ایندکسِ سوالِ جاری. |
| value / onValueChange | string / (value: string) => void | — | پاسخِ انتخاب‌شدهٔ سوالِ جاری. |
| onNext | () => void | — | با کلیکِ دکمهٔ ادامه/تایید صدا زده می‌شود. |
| onSkip | () => void | — | نبودنش یعنی دکمهٔ «رد کردن» اصلاً نمایش داده نمی‌شود. |
ApprovalCardOption
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| value | string | — | مقداری که با انتخاب این گزینه به بیرون می‌رود. |
ApprovalCardCustomOption
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| placeholder | string | "پاسخ دیگری…" | متنِ ورودیِ آزاد؛ خودِ متنِ تایپ‌شده به‌عنوانِ value ثبت می‌شود. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
Without Skip
با ندادنِ onSkip، دکمهٔ «رد کردن» اصلاً نمایش داده نمی‌شود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
Last Question
وقتی index برابرِ total - 1 است، ApprovalCardActions به‌جایِ «ادامه» می‌نویسد «تایید».
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
Custom Answer
ApprovalCardCustomOption را کنارِ گزینه‌های ثابت بگذارید؛ با تایپ‌کردن، خودش به‌عنوانِ پاسخِ انتخاب‌شده ثبت می‌شود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| Without Skip | سوالی که پاسخش الزامی است و نباید رد شود |
| Last Question | روی آخرین سوال، برچسبِ دکمه خودکار به «تایید» تغییر می‌کند |
| Custom Answer | وقتی گزینه‌های از‌پیش‌تعریف‌شده ممکن است جواب را نپوشانند |
دستورالعمل استفاده
گزینه‌ها را کوتاه و محدود نگه دار
چند طعم برای فصل جدید عرضه کنیم؟
انجام بده
دو تا چهار گزینهٔ کوتاه، تصمیم‌گیری را برای کاربر سریع و بی‌دردسر می‌کند.
چند طعم برای فصل جدید عرضه کنیم؟
انجام نده
فهرستِ بلند از گزینه‌های نزدیک‌به‌هم، این کامپوننت را به یک فرمِ پیچیده تبدیل می‌کند؛ به‌جایش از Select استفاده کنید.
پیشرفت را فقط برای چند سوالِ پشتِ‌سرِهم نشان بده
آیا این تغییر برایِ همهٔ فروشگاه‌ها اعمال شود؟
انجام بده
وقتی چند سوال در صف است، ApprovalCardProgress به کاربر می‌گوید چقدر مانده.
آیا این تغییر برایِ همهٔ فروشگاه‌ها اعمال شود؟
انجام نده
برایِ total={1} نقطه‌های پیشرفت هیچ اطلاعِ مفیدی اضافه نمی‌کنند، فقط شلوغی است.