PostQuotedEmbed (نقلقول)
کارت تودرتوی کمحجم برای نقلقول / quote-tweet / reply parent. درون body یک PostCard دیگر رندر میشود.
معرفی
<PostQuotedEmbed> همان الگوی stacking X (Twitter quote-tweet) را پیاده میکند: یک کارت کمارتفاع داخل بدنهی پست والد. متریک و اکشن ندارد و recursive نمیشود.
چه زمانی استفاده کنیم:
- وقتی
post.quotedیاpost.parentتنظیم شده. - برای پیشنمایش فشرده و فقطخواندنی پست مرجع داخل بدنهی پست والد — مثلاً نقلقولی از پست «رونمایی محصول جدید» در فید پایش کمپین.
- وقتی یک منشن قابلکلیک به پست مرجع کافی است و جزئیات کامل در سطح دیگری (مثل درآور جزئیات) نمایش داده میشود.
چه زمانی استفاده نکنیم:
- برای نمایش parent thread با تعامل کامل — بهجای آن یک
<PostCard>معمولی با pinned/thread context رندر کنید. - برای نمایش مستقل پست در فید یا نتایج جستجو — این کارت متریک و اکشن ندارد؛ از
<PostCard>استفاده کنید. - برای نقلقول تودرتو (نقلقول داخل نقلقول) — کامپوننت عمداً recursive نمیشود و فقط یک سطح را نمایش میدهد.
زمین بازی
زمین بازی
سا
سارا احمدی@sara_ahmadi·۳ ساعت پیش
نظر شما دربارهی این محصول چیست؟ #افکارسنجی
تنظیمات
داده
کد این نمونه بهصورت خودکار قابل تولید نیست — برای کد آمادهی copy/paste به بخش «استفاده» در بالای صفحه مراجعه کنید.
استفاده
import { PostQuotedEmbed } from '@partodata/ui'
;<PostQuotedEmbed post={post.quoted} onOpen={(p) => openInDrawer(p)} />RTL
<PostCard> این کارت را با ms-4 از inline-start تو میبرد — در RTL یعنی indent از سمت راست (همسو با الگوی X RTL). خودِ PostQuotedEmbed هیچ margin افقی اعمال نمیکند.
راهنمای استفاده
بکنید
- در حالت عادی اجازه دهید
<PostCard>خودش این کارت را از رویpost.quotedیاpost.parentرندر کند و شما فقطonOpenQuotedرا تنظیم کنید — رندر دستی را برای سطحهای سفارشی (مثل درآور جزئیات) نگه دارید. onOpenرا تنظیم کنید تا کارت قابل فوکوس و قابل کلیک شود و کاربر بتواند به پست مرجع برود — بدون آن کارت غیرتعاملی رندر میشود.- برای مدیای پست نقلقولشده
altتنظیم کنید تا thumbnail برای screen reader توصیف داشته باشد. - در دادهی نمونه و دموها از موضوعات خنثای برند/مارکتینگ استفاده کنید (مانند «کمپین تخفیف فصلی» یا «رونمایی محصول جدید»).
نکنید
- متریک، دکمهی اکشن یا محتوای تعاملی داخل کارت اضافه نکنید — این کارت عمداً read-only است؛ تعامل کامل کار
<PostCard>است. - نقلقول تودرتو نسازید — کامپوننت recursive نمیشود؛ اگر پست نقلقولشده خودش نقلقول دارد، همان یک سطح کافی است.
- margin افقی جهتدار (
ml/mrیاleft/right) به آن اضافه نکنید — تورفتگی را والد باms-*(CSS Logical Property) کنترل میکند. - متن کامل پست را داخل کارت جا ندهید — snippet به سه خط clamp میشود؛ برای متن کامل، کاربر را با
onOpenبه جزئیات پست ببرید.
Props
PostQuotedEmbed
کامپوننت همهی propهای استاندارد React.HTMLAttributes<HTMLDivElement> (مانند className) را میپذیرد و روی عنصر ریشه پخش میکند؛ ref نیز با forwardRef به همان div ریشه میرسد. ساختار کامل PostData در صفحهی PostCard مستند شده است.
دسترسیپذیری
- تعاملی بودن کارت شرطی است: فقط وقتی
onOpenتنظیم شده باشد، عنصر ریشهrole="button"وtabIndex={0}میگیرد و با Tab قابل فوکوس است. بدونonOpenکارت یکdivایستا است و در ترتیب Tab قرار نمیگیرد. - Enter و Space همان رفتار کلیک را اجرا میکنند (
onOpen)؛ برای هر دو ازpreventDefaultاستفاده میشود تا Space صفحه را اسکرول نکند. - کلیک و کلیدها با
stopPropagationاز رسیدن رویداد بهPostCardوالد (که خودشrole="button"دارد) جلوگیری میکنند — فعال کردن نقلقول، کارت والد را باز نمیکند. - نشانگر فوکوس فقط با
focus-visible(حلقهی رنگ برند) نمایش داده میشود و برای کلیک ماوس ظاهر نمیشود. - آیکن تیک تأیید
aria-label="حساب تأیید شده"دارد و برای screen reader خوانده میشود. - thumbnail با
altآیتم مدیا رندر میشود؛ اگرaltتعریف نشده باشد،alt=""(تصویر decorative) اعمال میشود — بنابراین در دادهی مدیاaltمعنادار تنظیم کنید. handleنویسنده باdir="ltr"رندر میشود تا@usernameدر متن RTL درست نمایش داده شود، و زمان نسبی با ارقام فارسی بهصورت متن عادی خوانده میشود.
کامپوننتهای مرتبط
- برای نمایش کامل و تعاملی پست (متریک، اکشن، مدیا) →
<PostCard>— میزبان اصلی این کارت است و باpost.quoted/post.parentآن را خودکار رندر میکند - برای باز کردن جزئیات پست نقلقولشده بعد از
onOpen→<PostDetailsDrawer>— سطح استاندارد نمایش کامل پست در فید - برای repost wrapper (مثل «X بازنشر کرد») →
<PostRepostHeader>که در<PostCard>بالای کارت مینشیند - برای نمایش thread connector (خط بصری بین پستهای یک رشته) →
<PostThreadConnector>