صورة رمزية
Avatarصورة رمزية في React بصورة وبديل من الأحرف الأولى وأحجام وأشكال ونقطة حالة ومجموعات متراصّة مع فائض +N. الأسماء المتاحة مدمجة.
يعرض Avatar صورة المستخدم، ويعرض AvatarFallback الأحرف الأولى عند غياب الصورة. استخدم AvatarGroup لتجميع عدة صور مع عداد "+N" للفائض.
متى تستخدمه
استخدم Avatar لتمثيل شخص أو جهة في الترويسات والتعليقات والمخطّطات الزمنية والجداول. وفّر AvatarFallback بالأحرف الأولى للصور الناقصة.
استخدم AvatarGroup لعرض عدّة مشاركين بإيجاز، وقيّد المجموعة لتبقى مقروءة.
أمثلة
AHNK
الخصائص
الخصائص التي يعرّفها Avatar. سمات العنصر الأصلي تمرّ كما هي.
<Avatar>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
size | "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | ||
shape | "circle" | "square" | ||
status | AvatarStatus | Presence indicator rendered in the bottom-{end} corner. The color tracks the status (online → success, busy → destructive, away → warning, offline → muted). Position flips in RTL automatically via logical props. | |
statusLabel | string | Accessible label for the status indicator. Defaults to the status value (e.g. "online"). Pass a localized string for non-English UIs. | |
asChild | boolean |
<AvatarImage>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
onLoadingStatusChange | (status: ImageLoadingStatus) => void | ||
asChild | boolean |
<AvatarFallback>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
colorScheme | "primary" | "secondary" | "destructive" | "default" | "success" | "warning" | "info" | ||
delayMs | number | ||
asChild | boolean |
<AvatarGroup>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
max | number | Cap the number of visible Avatars. Excess children are collapsed into a trailing "+N" chip. When unset, every child is rendered. | |
size | "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | Size cascaded to each child Avatar that doesn't already set its own size. | |
shape | "circle" | "square" | Shape cascaded to each child Avatar that doesn't already set its own shape. | |
overflowLabel | (count: number) => string | Accessible label for the "+N" overflow chip. Defaults to "N more" - pass a
localized builder for non-English UIs. |
إمكانية الوصول
يعرض Avatar الدور role="img" باسم متاح من alt أو نص البديل. نقطة الحالة زخرفية، فاذكر الحالة نصًّا قريبًا حين تهمّ.
تعلن المجموعات عدد الفائض نصًّا لا بعرض «+N» بصريًا فقط.