متادیتای پست (PostMetadata)
ردیف metadata پست — likes، comments، shares، sentiment، authority score
معرفی
PostMetadata ردیف metadata پایین پست: تعامل (like/comment/share)، sentiment، authority score، تعداد view، و enrichment flags. building block داخلی PostCard.
فشرده (compact)
۱۲.۴K۸۷۶۱۲۴۴۲
گسترده (comfortable)
۱۲.۴K۸۷۶۱۲۴۴۲مثبت
زمین بازی
زمین بازی
۱۲.۴K۸۷۶۱۲۴۴۲مثبت
تنظیمات
ظاهر
محتوا
کد این نمونه بهصورت خودکار قابل تولید نیست — برای کد آمادهی copy/paste به بخش «استفاده» در بالای صفحه مراجعه کنید.
چه زمانی مستقیم استفاده کنیم:
- summary یک پست در یک سطر (بدون body) — مثل لیست top-posts در یک bulletin
- override metadata در PostDetailsDrawer با placement جدا
- ساخت compare-view چندتایی که میخواهید فقط metadata رو ببینید نه body
چه زمانی استفاده نکنیم:
- در
PostCardخود metadata بهصورت inline wired است
استفاده
import { PostCard, PostMetadata } from '@parto-system-design/ui'
// بهصورت معمول داخل PostCard استفاده میشود (PostCard خود این primitive را wrap میکند):
<PostCard post={post} />
// استفاده مستقیم برای summary سطر-تک یک پست (بدون body):
<PostMetadata
metrics={post.metrics}
sentiment={post.sentiment}
density="compact"
/>اگر metrics تعریف نشده و sentiment هم پاس داده نشده، component چیزی رندر نمیکند. در حالت comfortable یک SentimentBadge کنار سایر متریکها نمایش داده میشود.
راهنمای استفاده
بکنید
- برای summary سطر-تک یک پست در لیست top-posts یا compare-view از
PostMetadataمستقیم استفاده کنید -densityرا با والدPostCardهمگام نگه دارید (compactدر feed،comfortableدر detail) - برای آیکونهای متریک ازaria-labelمعنادار (مانند «بازدید: ۱.۲هزار») استفاده کنید — کامپوننت پیشفرض این کار را انجام میدهد
نکنید
- این کامپوننت را داخل
PostCardدوباره فراخوانی نکنید —PostCardخودش metadata را inline wire کرده است - عددهای بزرگ را با کاما/نقطهی Latin فرمت نکنید —formatNumberوconvertToLocalNumbersبهطور پیشفرض ارقام فارسی رندر میکنند
جدول ویژگیها
دسترسیپذیری
- هر متریک یک
aria-labelساختاریافته («لایک: ۱۲هزار») دارد تا screen reader مقدار + برچسب را اعلام کند. - آیکونهای Lucide بهصورت decorative هستند (متن aria-label روی والد span قرار دارد، آیکون پنهان از a11y tree).
SentimentBadgeدر حالتcomfortableبا اسلاتdata-slot="sentiment-badge"خود ARIA semantics مناسب احساس را تأمین میکند.- این کامپوننت هیچ interactive element ندارد — keyboard navigation از عهدهی والد (
PostCard/PostList) است.
کامپوننتهای مرتبط
- کارت کامل →
PostCard - اکشنهای inline →
PostActions - header →
PostHeader - محتوا →
PostBody