Avatar

نصب

pnpm dlx @simurgh-ui/cli add avatar

import { Avatar } from '@simurgh-ui/react/avatar';
import { Avatar as VueAvatar } from '@simurgh-ui/vue/avatar';
import { AvatarComponent } from '@simurgh-ui/angular/avatar';
import '@simurgh-ui/styles/avatar.css';

پیش‌نمایش واقعی

Live component Avatar ◆

AL

Ada LovelaceMaintainer

استفاده

<Avatar
  src={user.avatar}
  alt="مریم میرزاخانی"
  fallback="م‌م"
/>

<Avatar :src="user.avatar" alt="مریم میرزاخانی" fallback="م‌م" />

<simurgh-avatar
  [src]="user.avatar"
  alt="مریم میرزاخانی"
  fallback="م‌م"
/>

رفتار و API

اگر src بارگذاری شود تصویر نمایش داده می‌شود و در غیر این صورت fallback قطعی باقی می‌ماند.

Prop/Input	Type	الزام
src	string	اختیاری
alt	string	نام یا توضیح مناسب
fallback	متن یا ReactNode	لازم

دسترس‌پذیری

اگر نام شخص کنار Avatar نوشته شده و تصویر اطلاعات تازه‌ای ندارد، alt="" مناسب است. در غیر این صورت نام مختصر هویت را بنویسید. fallback نباید تنها وسیلهٔ انتقال هویت مهم باشد و رنگ نیز به‌تنهایی کافی نیست.

Last verified on 2026-08-13 against Simurgh registry 0.1.1.