صورة رمزية
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" بصرياً.