آواتار (Avatar)

نمایش تصویر پروفایل کاربر با پشتیبانی از fallback خودکار

معرفی

کامپوننت Avatar برای نمایش تصویر پروفایل کاربران استفاده می‌شود. در صورت عدم بارگذاری تصویر، به‌طور خودکار محتوای fallback (مثل حروف اول نام) را نمایش می‌دهد.

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

برای لوگوی برند یا شرکت — از تگ <img> یا کامپوننت Logo استفاده کنید
برای آیکون‌های غیرشخصی — از Icon component استفاده کنید
بدون AvatarFallback — همیشه fallback تعریف کنید

استفاده

ساعرمح

import { Avatar, AvatarImage, AvatarFallback } from '@partodata/ui'

<Avatar>
  <AvatarImage src="/avatar.jpg" alt="نام کاربر" />
  <AvatarFallback>م ا</AvatarFallback>
</Avatar>

زمین بازی

با تغییر تنظیمات زیر، آواتار را به صورت زنده مشاهده کنید.

زمین بازی

سا

تنظیمات

محتوا

آدرس تصویر

ظاهر

متن جایگزین

کد این نمونه به‌صورت خودکار قابل تولید نیست — برای کد آماده‌ی copy/paste به بخش «استفاده» در بالای صفحه مراجعه کنید.

مثال‌ها

Fallback (بدون تصویر)

وقتی تصویر در دسترس نباشد، AvatarFallback به‌جای آن نمایش داده می‌شود:

<Avatar>
  <AvatarImage src="/broken-url.jpg" alt="کاربر" />
  <AvatarFallback>ک ز</AvatarFallback>
</Avatar>

اندازه‌های مختلف

از prop size برای تعیین قطر آواتار استفاده کنید (پیش‌فرض lg معادل 40 پیکسل). متن AvatarFallback به‌طور خودکار متناسب با همین اندازه مقیاس می‌شود — نیازی به بازنویسی دستی className روی fallback نیست:

<div className="flex items-center gap-4">
  <Avatar size="xs">
    <AvatarImage src="/avatar.jpg" alt="خیلی کوچک" />
    <AvatarFallback>خ</AvatarFallback>
  </Avatar>

  <Avatar size="sm">
    <AvatarImage src="/avatar.jpg" alt="کوچک" />
    <AvatarFallback>ک</AvatarFallback>
  </Avatar>

  <Avatar size="md">
    <AvatarImage src="/avatar.jpg" alt="متوسط" />
    <AvatarFallback>م</AvatarFallback>
  </Avatar>

  <Avatar size="lg">
    <AvatarImage src="/avatar.jpg" alt="بزرگ (پیش‌فرض)" />
    <AvatarFallback>ب</AvatarFallback>
  </Avatar>

  <Avatar size="xl">
    <AvatarImage src="/avatar.jpg" alt="خیلی بزرگ" />
    <AvatarFallback>خب</AvatarFallback>
  </Avatar>
</div>

گروه آواتار

چند آواتار در کنار هم با overlap:

<div className="flex -space-x-2">
  <Avatar className="border-2 border-background">
    <AvatarImage src="/user1.jpg" alt="کاربر 1" />
    <AvatarFallback>ک1</AvatarFallback>
  </Avatar>
  <Avatar className="border-2 border-background">
    <AvatarImage src="/user2.jpg" alt="کاربر 2" />
    <AvatarFallback>ک2</AvatarFallback>
  </Avatar>
  <Avatar className="border-2 border-background">
    <AvatarFallback aria-label="3 نفر دیگر">+3</AvatarFallback>
  </Avatar>
</div>

Props

Avatar

Prop

Type

AvatarImage

Prop

Type

AvatarFallback

Prop

Type

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

بکنید

از آواتار در کنار نام کاربر استفاده کنید تا شناسایی سریع‌تر شود - همیشه alt مناسب و معنادار برای تصویر تعریف کنید
برای گروه آواتارها، شمارنده باقی‌مانده (مثل +3) را با aria-label توضیح دهید

نکنید

از آواتار بدون نام کاربر در متن استفاده نکنید — به تنهایی ممکن است واضح نباشد - از تصاویر با کیفیت پایین استفاده نکنید — AvatarFallback را همیشه تنظیم کنید - بدون AvatarFallback از آواتار استفاده نکنید — در صورت خطای بارگذاری تصویر، UI خالی نمایش داده می‌شود