Avatar
صورة شخص أو أحرفه الأولى أو أيقونة عامة. سبعة أحجام، دائري أو مربع، ومجموعات الصور الرمزية.
الإصدار 0.2.0 ·
التثبيت
bunx --bun shadcn@latest add @dga/avatarالاستخدام
import { Avatar, AvatarGroup } from "@/components/ui/avatar";
<Avatar src="/people/noura.jpg" alt="نورة القحطاني" initials="ن ق" />
<AvatarGroup>
<Avatar size={32} src="/people/noura.jpg" alt="نورة" />
<Avatar size={32} initials="+3" aria-label="3 أشخاص آخرون" />
</AvatarGroup>مبني على Base UI Avatar، الذي يعرض البديل أثناء تحميل الصورة وعند فشلها.
البنية
- Avatar: الجذر، وفيه الصورة أو البديل.
- Image: الصورة.
- Fallback: الأحرف الأولى، أو أيقونة مستخدم عامة.
- AvatarGroup: صف من الصور الرمزية، متراكبة أو متباعدة.
أمثلة
الأحجام والشكل
الأحجام 24 و32 و40 (الافتراضي) و48 و64 و80 و120px. يستخدم square القيمة radius-md؛ ويضيف bordered حلقة بيضاء.
المجموعات
يُراكب AvatarGroup عناصره بمقدار 4px مع حلقة بيضاء (stacked، وهو الافتراضي). اضبط stacked={false} للتباعد.
اتجاه RTL
تتراكب المجموعة من جهة البداية، فينقلب اتجاه التراكب في العربية.
إمكانية الوصول
- أعطِ الصورة
altباسم الشخص، إلا إذا كان الاسم ظاهرًا بجوارها (فاستخدمalt=""). - تُقرأ الأحرف الأولى كنص. وللصورة الرمزية التي تشير إلى الزائد مثل «+3»، أضف
aria-labelمثل «3 أشخاص آخرون». - أيقونة البديل مخفية عن قارئات الشاشة.
مرجع API
Avatar
صورة شخص أو الأحرف الأولى من اسمه أو أيقونة مستخدم عامة.
| الخاصية | النوع | القيمة الافتراضية |
|---|---|---|
24 | 32 | 40 | 48 | 64 | 80 | 120الحجم بالبكسل. | 40 | |
| ||
booleanمربع بزوايا مستديرة بدل الدائرة. | false | |
| ||
booleanيضيف حلقة حول الصورة الرمزية. | false | |
| ||
stringحرف أو حرفان يظهران عند عدم وجود صورة. | لا توجد قيمة افتراضية | |
| ||
stringرابط الصورة. إن غاب الرابط أو فشل تحميل الصورة تظهر الأحرف الأولى أو الأيقونة. | لا توجد قيمة افتراضية | |
| ||
stringالنص البديل للصورة. استخدم اسم الشخص. | "" | |
| ||
يقبل أيضًا جميع خصائص Base UI Avatar (يفتح في نافذة جديدة).
AvatarGroup
صف من الصور الرمزية. ضع Avatar بأحرف مثل "+3" في النهاية للدلالة على الباقي.
| الخاصية | النوع | القيمة الافتراضية |
|---|---|---|
booleanتداخل الصور الرمزية (في Figma: Stacked). | true | |
| ||
يقبل أيضًا جميع خصائص Base UI Avatar (يفتح في نافذة جديدة).
الاختلافات عن DGA
| التغيير | السبب |
|---|---|
Avatar: sizes and text | One text size cannot fit avatars from 24 to 120px. |
عرض جميع الاختلافات (1) لهذا المكوّن أسباب الاختلافات مكتوبة بالإنجليزية.
التباين
12 زوجًا لونيًا فُحص · جميعها تجتاز WCAG 2.1 AAعرض 2 حالةإخفاء
| النمط / الحالة | الفاتح | الداكن |
|---|---|---|
| initials / text | 16.44:1 AAA | 12.71:1 AAA |
| icon / icon | 16.44:1 3:1 | 12.71:1 3:1 |
يحتاج النص إلى تباين 4.5:1، والأيقونات وحلقات التركيز إلى 3:1. الحالات المعطّلة مستثناة. تقرير التباين الكامل