آواتار (Avatar)
کامپوننت آواتار برای نمایش یک کاربر یا برند محصول استفاده میشود و میتواند متن، آیکونها یا تصاویر را نمایش دهد.
شکل (Shape)
آواتار
shape میتواند به صورت circle، rounded یا square باشد.اندازه (Size)
کامپوننت آواتار در ۳ اندازه
sm، md و lg موجود است، همچنین امکان تعیین اندازه سفارشی وجود دارد.نوع (Type)
آواتار میتواند متن، آیکونها یا تصاویر را نمایش دهد.
AT
رنگ (Color)
رنگها میتوانند از طریق پراپهای
backgroundColor و textColor به آواتار متن و آیکونها اعمال شوند.A
وضعیت (Status)
آواتار همچنین میتواند نشان وضعیت داشته باشد که همراه با کامپوننت
Badge نمایش داده میشود.99
گروه آواتار (Avatar Group)
چندین آواتار را در یک ردیف به هم متصل کنید.
+2API
آواتار (Avatar)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| shape | شکل آواتار | 'rounded' | 'square' | 'circle' | 'rounded' |
| size | اندازه آواتار | 'lg' | 'md' | 'sm' | number | 'md' |
| icon | آیکون آواتار | ReactNode | - |
| src | آدرس تصویر آواتار | string | - |
| srcSet | ویژگی srcset برای تصویر آواتار | string | - |
| alt | ویژگی alt برای تصویر آواتار | string | - |
گروه آواتار (Avatar.Group)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| chained | آیا آواتارها در گروه به هم متصل شوند | boolean | false |
| maxCount | حداکثر تعداد آواتارهایی که باید نمایش داده شوند و آواتار حذف شده را اضافه کند | number | 4 |
| omittedAvatarContent | محتوای آواتار حذف شده سفارشی | string | ReactNode | |
| omittedAvatarProps | پراپهای آواتار حذف شده | Object (Refer to Avatar props above) | - |
| omittedAvatarTooltip | آیا برای آواتار حذف شده تولتیپ فعال باشد | boolean | false |
| onOmittedAvatarClick | کالبک وقتی که آواتار حذف شده کلیک میشود | () => void | - |
| omittedAvatarTooltipProps | پراپهای تولتیپ آواتار حذف شده، برای جزئیات به پراپهای تولتیپ مراجعه کنید | Object | - |