گروه آواتار (AvatarGroup)

معرفی

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

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

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

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

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

زمین بازی

با تغییر تنظیمات زیر، پیش‌نمایش زنده را مشاهده کنید.

استفاده

import { AvatarGroup } from '@partodata/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

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

• AvatarGroup کاملاً غیرتعاملی است: هیچ عنصر قابل فوکوسی ندارد و در ترتیب Tab قرار نمی‌گیرد. اگر به آواتار قابل کلیک نیاز دارید، آن را در یک دکمه یا لینک بپیچید و نام دسترس‌پذیر را خودتان تعیین کنید
• alt تنها زمانی به DOM می‌رسد که src داده شده و تصویر با موفقیت بارگذاری شود (رفتار Radix Avatar). در بقیه حالت‌ها متن fallback (یا نخستین حرف alt) خوانده می‌شود — پس دست‌کم یکی از fallback یا alt را همیشه پر کنید
• شمارنده «+N» متن ساده داخل آواتار است و دقیقاً به همان شکلی که دیده می‌شود خوانده می‌شود؛ معنای آن را در متن پیرامون توضیح دهید

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

• اگر فقط یک کاربر نمایش می‌دهید → از آواتار (Avatar) استفاده کنید
• اگر نیاز به نمایش نام و اطلاعات حساب دارید → از حساب (Account) با layout="row" استفاده کنید
• اگر نیاز به کارت کامل حساب دارید → از حساب (Account) با layout="card" استفاده کنید