Commentv1.0.0
برای نظرهای زیرِ مقاله، پرسش و پاسخِ محصول و گفت‌وگوی تیمی. هر نظر آواتار، نام، زمان، متن و ردیفِ اقدام دارد؛ پاسخ‌ها زیرِ متنِ والد با خطِ عمودی می‌نشینند تا معلوم باشد جوابِ کیست. CommentComposer کادرِ نوشتن است: خالی فرستاده نمی‌شود، خطا کنارِ همان کادر می‌آید و بعد از ثبت پاک می‌شود.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/comment.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/comment.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/comment.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/comment.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { Comment, CommentComposer, CommentList, CommentReplies } from "@/components/ui/comment"این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
CommentList فهرست است و هر Comment یک article. پاسخ‌ها را در CommentReplies به پراپِ replies بدهید، نه بیرونِ نظر، تا هم‌ترازِ متنِ والد بنشینند. اقدام‌ها (پسندیدن، پاسخ، گزارش) را با Buttonِ ghost به actions بدهید؛ خودِ کامپوننت آن‌ها را ۳۲ پیکسل می‌کند. CommentComposer فقط متن را جمع می‌کند؛ ذخیره، تأیید و نامِ کاربرِ مهمان (با fields) کارِ صفحه است.
دسترس‌پذیری
- هر نظر یک article با header است و زمان در time با dateTime، پس صفحه‌خوان و موتورِ جست‌وجو تاریخ را می‌فهمند.
- کادرِ نوشتن برچسب دارد (پیش‌فرض فقط برای صفحه‌خوان، با showLabel دیدنی). متنِ خالی خطا را با aria-describedby به کادر وصل می‌کند و فوکوس را برمی‌گرداند؛ دکمه غیرفعال نمی‌شود.
- دکمهٔ پسندیدن aria-pressed دارد و برچسبش نامِ نویسنده را می‌گوید؛ دکمهٔ پاسخ aria-expanded.
مرجع API
Comment
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| author | React.ReactNode | — | نامِ نویسنده. |
| avatar | React.ReactNode | — | معمولاً Avatar؛ ترکیبی از عکس، آیکون و کمی حروفِ اول. |
| time / dateTime | React.ReactNode / string | — | زمانِ نمایشی (مثلاً formatRelativeTime) و ISO برای time. |
| badge | React.ReactNode | — | کنارِ نام: «نویسنده» یا «در انتظارِ تأیید». |
| actions | React.ReactNode | — | Buttonهای ghost زیرِ متن؛ ۳۲ پیکسل. |
| replies | React.ReactNode | — | CommentReplies یا کادرِ پاسخ، هم‌ترازِ متن. |
CommentComposer
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| onSubmit | (text: string) => void | boolean | Promise<void | boolean> | — | متنِ تمیزشده؛ false یعنی متن پاک نشود (مثلاً خطای سرور). |
| label / showLabel | string / boolean | "نظرِ شما" / false | برچسبِ کادر؛ پیش‌فرض فقط برای صفحه‌خوان. |
| placeholder / submitLabel | string | "نظرتان را بنویسید…" / "ثبتِ نظر" | متن‌های کادر و دکمه. |
| hint | React.ReactNode | — | کنارِ دکمه، مثلاً «پس از بررسی منتشر می‌شود». |
| fields | React.ReactNode | — | فیلدهای بالای متن، مثلاً نامِ کاربرِ مهمان. |
| onCancel | () => void | — | دکمهٔ انصراف برای کادرِ پاسخ. |
| avatar / rows / minLength / autoFocus | React.ReactNode / number / number / boolean | — / 3 / 2 / — | آواتارِ نویسنده، ارتفاع، حداقلِ نویسه و فوکوسِ خودکار. |
CommentList و CommentReplies
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| ...props | React.ComponentProps<"ul"> | — | فهرستِ نظرها؛ CommentReplies خطِ رشته و تورفتگی دارد. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
کادرِ نوشتن (CommentComposer)
نظرِ ثبت‌شده بی‌درنگ با «در انتظارِ تأیید» در فهرست می‌آید تا کاربر بداند ثبت شده ولی هنوز عمومی نیست. متنِ خالی را بفرستید تا خطا را ببینید.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
پاسخ در جا
دکمهٔ «پاسخ» کادرِ کوچکِ پاسخ را زیرِ همان نظر باز می‌کند، با انصراف؛ بعد از ارسال بسته می‌شود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| کادرِ نوشتن (CommentComposer) | نظرِ تازه زیرِ مقاله |
| پاسخ در جا | رشتهٔ گفت‌وگو |
دستورالعمل استفاده
پاسخ زیرِ والد، با خطِ رشته
- کی
کیان سؤال دارم.آرمیتا ممنون!
انجام بده
CommentReplies داخلِ replies؛ پاسخ هم‌ترازِ متنِ والد است و خطِ عمودی رشته را نشان می‌دهد.
- کی
کیان سؤال دارم. - آر
آرمیتا ممنون!
انجام نده
پاسخ به‌صورتِ نظرِ جدا در همان سطح؛ معلوم نیست جوابِ کیست.