گروه آواتار (Avatar Group)

معرفی

کامپوننت AvatarGroup برای نمایش گروهی از کاربران یا اعضای تیم استفاده می‌شود. آواتارها به‌صورت هم‌پوشان (stacked) نمایش داده می‌شوند و در صورت تجاوز از حد مجاز، تعداد باقی‌مانده به‌صورت «+N» نمایش داده می‌شود.

چه زمانی استفاده کنیم:

• برای نمایش اعضای تیم یا همکاران یک پروژه
• در هدر کارت‌ها برای نمایش مشارکت‌کنندگان
• در جداول برای نمایش کاربران مرتبط با یک رکورد

چه زمانی استفاده نکنیم:

• برای نمایش یک کاربر واحد — از Avatar استفاده کنید
• برای نمایش لیست کامل کاربران — از جدول یا لیست استفاده کنید

استفاده

import { AvatarGroup } from '@parto-system-design/ui'

const users = [
  { src: '/avatars/user1.jpg', alt: 'علی' },
  { src: '/avatars/user2.jpg', alt: 'مریم' },
  { alt: 'رضا', fallback: 'رض' },
]

<AvatarGroup items={users} max={3} />

حالت‌ها و انواع

اندازه‌ها

سه اندازه sm، md (پیش‌فرض)، و lg در دسترس است:

<AvatarGroup items={users} size="sm" />
<AvatarGroup items={users} size="md" />
<AvatarGroup items={users} size="lg" />

حداکثر تعداد نمایش

با prop مقدار max می‌توانید تعداد آواتارهای قابل نمایش را محدود کنید:

<AvatarGroup items={users} max={3} />

راهنمای استفاده

جدول ویژگی‌ها

AvatarGroupItem

دسترسی‌پذیری

• هر آواتار دارای alt text برای screen reader است
• شمارنده «+N» به‌عنوان fallback متنی قابل خواندن است
• ترتیب فوکوس طبیعی از راست به چپ (RTL) رعایت می‌شود

کامپوننت‌های مرتبط

• اگر فقط یک کاربر نمایش می‌دهید → از آواتار (Avatar) استفاده کنید
• اگر نیاز به نمایش نام و اطلاعات کاربر دارید → از اطلاعات پروفایل (ProfileInfo) استفاده کنید
• اگر نیاز به کارت پروفایل کامل دارید → از کارت پروفایل (ProfileCard) استفاده کنید