آواتار (Avatar)

یک المان تصویری با پشتیبان برای نمایش کاربر.

نصب (Installation)

1npx @quark-lab/rad-ui add avatar

نمونه‌ها (Examples)

استفاده پایه (Basic Usage)

استفاده ساده از آواتار با تصویر و فال‌بک.

امیررضا محمدی

برنامه نویس

مشاهده کد

1import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
2
3export default function BasicExample() {
4  return (
5    <div className="flex items-center gap-4">
6      <Avatar>
7        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
8        <AvatarFallback>CN</AvatarFallback>
9      </Avatar>
10      <div>
11        <p className="font-medium">امیررضا محمدی</p>
12        <p className="text-sm text-muted-foreground">برنامه نویس</p>
13      </div>
14    </div>
15  );
16}
17

اندازه‌ها (Sizes)

تغییر اندازه آواتار با استفاده از کلاس‌های CSS.

CNکوچک

CNمتوسط

CNبزرگ

CNخیلی بزرگ

مشاهده کد

1import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
2
3export default function SizesExample() {
4  return (
5    <div className="flex items-end gap-6">
6      <div className="flex flex-col items-center gap-2">
7        <Avatar className="h-8 w-8">
8          <AvatarImage src="https://github.com/shadcn.png" />
9          <AvatarFallback>CN</AvatarFallback>
10        </Avatar>
11        <span className="text-xs text-muted-foreground">کوچک</span>
12      </div>
13      <div className="flex flex-col items-center gap-2">
14        <Avatar className="h-10 w-10">
15          <AvatarImage src="https://github.com/shadcn.png" />
16          <AvatarFallback>CN</AvatarFallback>
17        </Avatar>
18        <span className="text-xs text-muted-foreground">متوسط</span>
19      </div>
20      <div className="flex flex-col items-center gap-2">
21        <Avatar className="h-14 w-14">
22          <AvatarImage src="https://github.com/shadcn.png" />
23          <AvatarFallback>CN</AvatarFallback>
24        </Avatar>
25        <span className="text-xs text-muted-foreground">بزرگ</span>
26      </div>
27      <div className="flex flex-col items-center gap-2">
28        <Avatar className="h-20 w-20">
29          <AvatarImage src="https://github.com/shadcn.png" />
30          <AvatarFallback>CN</AvatarFallback>
31        </Avatar>
32        <span className="text-xs text-muted-foreground">خیلی بزرگ</span>
33      </div>
34    </div>
35  );
36}
37

شکل‌ها (Shapes)

تغییر شکل آواتار به دایره، مربع یا گرد.

CNدایره‌ای

CNگرد

CNمربع

مشاهده کد

1import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
2
3export default function ShapesExample() {
4  return (
5    <div className="flex items-center gap-6">
6      <div className="flex flex-col items-center gap-2">
7        <Avatar>
8          <AvatarImage src="https://github.com/shadcn.png" />
9          <AvatarFallback>CN</AvatarFallback>
10        </Avatar>
11        <span className="text-xs text-muted-foreground">دایره‌ای</span>
12      </div>
13      <div className="flex flex-col items-center gap-2">
14        <Avatar className="rounded-lg">
15          <AvatarImage src="https://github.com/shadcn.png" />
16          <AvatarFallback>CN</AvatarFallback>
17        </Avatar>
18        <span className="text-xs text-muted-foreground">گرد</span>
19      </div>
20      <div className="flex flex-col items-center gap-2">
21        <Avatar className="rounded-sm">
22          <AvatarImage src="https://github.com/shadcn.png" />
23          <AvatarFallback>CN</AvatarFallback>
24        </Avatar>
25        <span className="text-xs text-muted-foreground">مربع</span>
26      </div>
27    </div>
28  );
29}
30

محتوای پشتیبان (Fallback)

نمایش محتوای پشتیبان زمانی که تصویر بارگذاری نمی‌شود.

AMرضAB

مشاهده کد

1import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
2
3export default function FallbackExample() {
4  return (
5    <div className="flex items-center gap-4">
6      <Avatar>
7        <AvatarImage src="https://invalid-url.com/image.jpg" />
8        <AvatarFallback>AM</AvatarFallback>
9      </Avatar>
10      <Avatar>
11        <AvatarImage src="https://invalid-url.com/image.jpg" />
12        <AvatarFallback className="bg-primary text-primary-foreground">
13          رض
14        </AvatarFallback>
15      </Avatar>
16      <Avatar>
17        <AvatarImage src="https://invalid-url.com/image.jpg" />
18        <AvatarFallback className="bg-gradient-to-br from-purple-500 to-pink-500 text-white">
19          AB
20        </AvatarFallback>
21      </Avatar>
22    </div>
23  );
24}
25

آواتارهای گروهی (Grouped Avatars)

نمایش گروهی از آواتارها با حاشیه منفی.

CNVCAB+5

مشاهده کد

1import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
2
3export default function GroupExample() {
4  return (
5    <div className="flex -space-x-4 space-x-reverse">
6      <Avatar className="border-2 border-background">
7        <AvatarImage src="https://github.com/shadcn.png" />
8        <AvatarFallback>CN</AvatarFallback>
9      </Avatar>
10      <Avatar className="border-2 border-background">
11        <AvatarImage src="https://github.com/vercel.png" />
12        <AvatarFallback>VC</AvatarFallback>
13      </Avatar>
14      <Avatar className="border-2 border-background">
15        <AvatarImage src="https://invalid-url.com/image.jpg" />
16        <AvatarFallback>AB</AvatarFallback>
17      </Avatar>
18      <Avatar className="border-2 border-background">
19        <AvatarFallback className="bg-primary text-primary-foreground">
20          +5
21        </AvatarFallback>
22      </Avatar>
23    </div>
24  );
25}
26

مثال‌های کاربردی (Practical Examples)

کارت پروفایل کاربر (User Profile Card)

استفاده از آواتار در کارت پروفایل.

امیررضا محمدی

توسعه‌دهنده فرانت‌اند

تهران، ایران

مشاهده کد

1import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
2
3export default function ProfileCardExample() {
4  return (
5    <div className="p-6 rounded-lg border border-border max-w-sm">
6      <div className="flex items-center gap-4">
7        <Avatar className="h-16 w-16">
8          <AvatarImage src="https://github.com/shadcn.png" />
9          <AvatarFallback>AM</AvatarFallback>
10        </Avatar>
11        <div className="flex-1">
12          <h4 className="font-semibold">امیررضا محمدی</h4>
13          <p className="text-sm text-muted-foreground">
14            توسعه‌دهنده فرانت‌اند
15          </p>
16          <p className="text-xs text-muted-foreground mt-1">
17            تهران، ایران
18          </p>
19        </div>
20      </div>
21    </div>
22  );
23}
24

بخش نظرات (Comment Section)

نمایش آواتار کاربران در بخش نظرات.

رض

رضا احمدی۲ ساعت پیش

این کامپوننت عالی است! ممنون از این کتابخانه فوق‌العاده

سم

سمیرا مرادی۱ روز پیش

پشتیبانی از RTL عالی کار کرده 👏

مشاهده کد

1import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
2
3export default function CommentsExample() {
4  return (
5    <div className="space-y-4">
6      <div className="flex gap-3">
7        <Avatar className="h-8 w-8">
8          <AvatarImage src="https://github.com/shadcn.png" />
9          <AvatarFallback>رض</AvatarFallback>
10        </Avatar>
11        <div className="flex-1">
12          <div className="flex items-center gap-2 mb-1">
13            <span className="font-medium text-sm">رضا احمدی</span>
14            <span className="text-xs text-muted-foreground">
15              ۲ ساعت پیش
16            </span>
17          </div>
18          <p className="text-sm text-muted-foreground">
19            این کامپوننت عالی است! ممنون از این کتابخانه فوق‌العاده
20          </p>
21        </div>
22      </div>
23      <div className="flex gap-3">
24        <Avatar className="h-8 w-8">
25          <AvatarFallback className="bg-primary text-primary-foreground">
26            سم
27          </AvatarFallback>
28        </Avatar>
29        <div className="flex-1">
30          <div className="flex items-center gap-2 mb-1">
31            <span className="font-medium text-sm">سمیرا مرادی</span>
32            <span className="text-xs text-muted-foreground">
33              ۱ روز پیش
34            </span>
35          </div>
36          <p className="text-sm text-muted-foreground">
37            پشتیبانی از RTL عالی کار کرده 👏
38          </p>
39        </div>
40      </div>
41    </div>
42  );
43}
44

اعضای تیم (Team Members)

لیست اعضای تیم با وضعیت آنلاین/آفلاین.

امیررضا محمدی

مدیر تیم

فعال

رض

رضا کریمی

توسعه‌دهنده

آفلاین

سر

سارا احمدی

طراح UI/UX

فعال

مشاهده کد

1import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
2
3export default function TeamExample() {
4  return (
5    <div className="space-y-3">
6      <div className="flex items-center justify-between">
7        <div className="flex items-center gap-3">
8          <Avatar>
9            <AvatarImage src="https://github.com/shadcn.png" />
10            <AvatarFallback>AM</AvatarFallback>
11          </Avatar>
12          <div>
13            <p className="font-medium text-sm">امیررضا محمدی</p>
14            <p className="text-xs text-muted-foreground">مدیر تیم</p>
15          </div>
16        </div>
17        <span className="text-xs px-2 py-1 rounded-full bg-primary/10 text-primary">
18          فعال
19        </span>
20      </div>
21      <div className="flex items-center justify-between">
22        <div className="flex items-center gap-3">
23          <Avatar>
24            <AvatarFallback className="bg-purple-500 text-white">
25              رض
26            </AvatarFallback>
27          </Avatar>
28          <div>
29            <p className="font-medium text-sm">رضا کریمی</p>
30            <p className="text-xs text-muted-foreground">
31              توسعه‌دهنده
32            </p>
33          </div>
34        </div>
35        <span className="text-xs px-2 py-1 rounded-full bg-muted text-muted-foreground">
36          آفلاین
37        </span>
38      </div>
39      <div className="flex items-center justify-between">
40        <div className="flex items-center gap-3">
41          <Avatar>
42            <AvatarFallback className="bg-pink-500 text-white">
43              سر
44            </AvatarFallback>
45          </Avatar>
46          <div>
47            <p className="font-medium text-sm">سارا احمدی</p>
48            <p className="text-xs text-muted-foreground">
49              طراح UI/UX
50            </p>
51          </div>
52        </div>
53        <span className="text-xs px-2 py-1 rounded-full bg-primary/10 text-primary">
54          فعال
55        </span>
56      </div>
57    </div>
58  );
59}
60

مرجع API (API Reference)

Avatar

پراپ‌های کامپوننت Avatar.

پراپ (Prop)	نوع (Type)	پیش‌فرض (Default)	توضیحات (Description)
`className`	`string`	`undefined`	کلاس‌های CSS سفارشی

AvatarImage

پراپ‌های کامپوننت AvatarImage.

پراپ (Prop)	نوع (Type)	پیش‌فرض (Default)	توضیحات (Description)
`src`	`string`	`undefined`	آدرس تصویر
`alt`	`string`	`undefined`	متن جایگزین تصویر
`onLoadingStatusChange`	`(status) => void`	`undefined`	رویداد تغییر وضعیت بارگذاری
`className`	`string`	`undefined`	کلاس‌های CSS سفارشی

AvatarFallback

پراپ‌های کامپوننت AvatarFallback.

پراپ (Prop)	نوع (Type)	پیش‌فرض (Default)	توضیحات (Description)
`delayMs`	`number`	`undefined`	تاخیر نمایش (برای جلوگیری از چشمک زدن محتوا)
`className`	`string`	`undefined`	کلاس‌های CSS سفارشی

بهترین شیوه‌ها (Best Practices)

اندازه مناسب

برای نوار ناوبری و منوها: 32-40px
برای لیست‌ها و کامنت‌ها: 40-48px
برای پروفایل کاربر: 64px یا بیشتر

محتوای پشتیبان

برای محتوای پشتیبان از حروف اول نام استفاده کنید. اگر نام در دسترس نیست، از آیکون کاربر استفاده کنید

گروه‌بندی

برای نمایش اعضای گروه، از حاشیه منفی استفاده کنید و برای جلوگیری از هم‌پوشانی، border اضافه کنید

بهینه‌سازی تصاویر

تصاویر آواتار را در اندازه مناسب (2x اندازه نمایش) بهینه‌سازی کنید و از فرمت WebP یا AVIF استفاده کنید