ددیگ

Avatar

تصویر پروفایل کاربر؛ اگر تصویر نباشد یا بار نشود، حروف اول نام (فارسی یا انگلیسی) یا یک آیکون جایگزین می‌شود. رنگ، اندازه، شعاع گوشه و قاب‌دار بودن محورهای مستقل‌اند و AvatarGroup چند آواتار را روی‌هم‌افتاده کنار هم می‌چیند.

ری‌اکت ۱۹ و Next.js با پیاده‌سازی دسترس‌پذیری داخلی دیگویو ۳ با Composition API و Reka UISvelte ۵ با runes و Bits UIانگولار با signals و Angular CDK

این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.

ارعمEK

این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

نصب

با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.

نصب سریع با لینک سخت و دیسک مشترکپکیج‌منیجر پیش‌فرض Node.jsYarn نسخهٔ ۲ به بالا (Berry)رانتایم و پکیج‌منیجر Bun
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/avatar.json
npx dig-ui@latest add https://design-system-tau-green.vercel.app/r/avatar.json
yarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/avatar.json
bunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/avatar.json

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Reka UI در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Bits UI در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Angular CDK در دست کار است.

استفاده

import { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from "@/components/ui/avatar"

// سریع: تصویر یا نام را مستقیم بده
<Avatar src="/avatar.png" name="الناز رضایی" color="primary" />

// دستی: کنترل کامل روی تصویر و جایگزین
<Avatar>
  <AvatarImage src="/avatar.png" alt="الناز" />
  <AvatarFallback>ال</AvatarFallback>
</Avatar>

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Reka UI در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Bits UI در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Angular CDK در دست کار است.

ترکیب اجزا

Avatar را می‌شود به دو شکل استفاده کرد.

روش سریع این است که src یا name را مستقیم به خودِ Avatar بدهید. تصویر و جایگزین (حروف اول یا آیکون) خودکار ساخته می‌شوند و برای اکثر موارد همین کافی است.

اگر به کنترل کامل روی محتوای تصویر یا جایگزین نیاز دارید — مثلاً یک آیکون یا JSX دلخواه به‌جای حروف اول — روش دستی را انتخاب کنید: AvatarImage و AvatarFallback را خودتان به‌عنوان فرزند Avatar بگذارید. در این حالت پراپ‌های name، src، icon و getInitials روی خودِ Avatar نادیده گرفته می‌شوند و فرزندان دستی به‌جایشان رندر می‌شوند.

  • رنگ، اندازه، شعاع گوشه، قاب‌دار و غیرفعال‌بودن در هر دو روش یکسان کار می‌کنند.
  • داخل AvatarGroup، این مقادیر پیش‌فرض از گروه به ارث می‌رسند — مگر این‌که روی خودِ Avatar صریح ست شده باشند.

دسترس‌پذیری

  • وقتی src ندهید یا تصویر بار نشود، حروف اول name یا آیکون جایگزین همیشه چیزی نشان می‌دهد؛ آواتار هیچ‌وقت کاملاً خالی نمی‌ماند.
  • alt تصویر از name پر می‌شود؛ اگر متن دیگری لازم دارید (مثلاً «لوگوی برند X»)، alt را جدا بدهید.
  • AvatarGroup نقش role="group" دارد تا صفحه‌خوان مجموعه را یک واحد معرفی کند.
  • پراپ focusable آواتار را با Tab قابل‌دسترس می‌کند؛ فقط وقتی بدهید که خودِ آواتار عمل مستقلی دارد (مثلاً باز کردن پروفایل)، نه برای تزیین صرف.
  • disabled هم پوینتر را غیرفعال می‌کند و هم aria-disabled می‌گذارد تا صفحه‌خوان بفهمد این آواتار در حال حاضر قابل‌تعامل نیست.

مرجع API

Avatar

ویژگینوعپیش‌فرضتوضیح
namestring—نام صاحب آواتار؛ وقتی تصویری نیست یا بار نشده، حروف اول آن (فارسی یا انگلیسی) جایگزین می‌شود.
srcstring—آدرس تصویر.
altstringnameمتن جایگزین تصویر.
iconReact.ReactNode—آیکون جایگزین دلخواه به‌جای حروف اول، برای وقتی name نیست.
getInitials(name: string) => string—استخراج سفارشی حروف اول از name؛ پیش‌فرض هم فارسی هم انگلیسی را پوشش می‌دهد.
size"sm" | "default" | "lg""default"اندازهٔ آواتار.
color"default" | "primary" | "secondary" | "success" | "warning" | "destructive""default"رنگ پس‌زمینهٔ جایگزین و حلقهٔ bordered.
radius"none" | "sm" | "md" | "lg" | "full""full"شعاع گوشه.
borderedbooleanfalseحلقهٔ هم‌رنگ دور آواتار.
disabledbooleanfalseکم‌رنگ و غیرقابل‌کلیک می‌کند.
focusablebooleanfalseآواتار را در چرخهٔ Tab قرار می‌دهد.

AvatarImage

ویژگینوعپیش‌فرضتوضیح
srcstring—آدرس تصویر.
altstring—متن جایگزین تصویر.

AvatarFallback

ویژگینوعپیش‌فرضتوضیح
delayMsnumber—تأخیر نمایش جایگزین برای جلوگیری از سوسو زدن.

AvatarGroup

ویژگینوعپیش‌فرضتوضیح
maxnumber—بیشینهٔ آواتارهای نمایش‌داده‌شده؛ نبود آن یعنی همه نمایش داده شوند.
totalnumber—عدد شمارندهٔ «+N» را دستی مشخص می‌کند، مستقل از تعداد فرزندان.
renderCount(count: number) => React.ReactNode—آواتار «+N» سفارشی به‌جای پیش‌فرض.
gridbooleanfalseچیدمان شبکه‌ای به‌جای روی‌هم‌افتادگی.
size / color / radius / bordered / disabledهمان مقادیر Avatar—مقدار پیش‌فرض برای همهٔ فرزندان؛ هر Avatar با ست‌کردن پراپ خودش می‌تواند این پیش‌فرض را بشکند.

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Reka UI در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Bits UI در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Angular CDK در دست کار است.