البناء · جديد

الصورة الرمزية

تمثّل شخصًا أو حسابًا بصورة أو بالحرف الأول من الاسم أو برمز عام، وقد تحمل شارة للتعديل أو التوثيق أو الاتصال.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/avatar

الاعتماديات التي يضيفها: @base-ui/react, @phosphor-icons/react

الاستخدام

import { Avatar } from "@/components/ui/avatar";

<Avatar name="Layla Haddad" src={photoUrl} status="verified" />

أمثلة

الأنواع والمقاسات والحالات

صورة، أو الحرف الأول من name، أو type="placeholder"، أو type="add" لإضافة صورة؛ خمسة مقاسات؛ وstatus للتعديل أو التوثيق أو الاتصال.

حين لا تُحمَّل الصورة

تظهر الأحرف الأولى أثناء التحميل أو عند الفشل: حرف عربي واحد للاسم العربي، وحرفان للاسم اللاتيني، وinitials لتحديدها يدويًا؛ والرمز العام إن لم يوجد اسم.

مرجع الخصائص

Avatar

الخاصية	النوع	الافتراضي	الوصف
`name`	`string`		اسم الشخص أو الحساب: النص البديل ومصدر الأحرف الأولى.
`src`	`string`		خاصية Type = Photo.
`type`	`"placeholder" \| "initials" \| "add"`		خاصية Type من دون صورة.
`initials`	`string`		بدل الأحرف المستخرجة من الاسم.
`size`	`"xxs" \| "xs" \| "sm" \| "md" \| "lg"`	`"md"`	‏24 و32 و40 و48 و60 بكسل.
`status`	`"none" \| "edit" \| "verified" \| "online"`	`"none"`	خاصية Status: شارة في زاوية نهاية السطر السفلية.
`decorative`	`boolean`	`false`	يخفيها عن قارئ الشاشة حين يظهر الاسم بجانبها.

إمكانية الوصول

ARIA

‏role="img" باسم الشخص والحالة بلغة الصفحة («ليلى حداد، موثّق»)؛ النقطة الخضراء ليست الإشارة الوحيدة.
شارة التعديل زخرفية: الزر الذي يحيط بالصورة يسمّي الإجراء («تغيير الصورة»).

ملاحظات العربية والاتجاه

ينعكس

الشارة في زاوية نهاية السطر السفلية: يسارًا في العربية.

لا ينعكس

الصورة وعلامة التوثيق والقلم لا تنعكس.

الأرقام: لا أرقام في الصورة الرمزية.
الخط العربي: الاسم العربي حرف عربي واحد (ل لليلى)، لا حرفان لاتينيان؛ الأحرف بخط IBM Plex Sans Arabic بوزن SemiBold.
النص ثنائي الاتجاه: ضع الاسم الظاهر بجانبها في <bdi>: الاسم اللاتيني في قائمة عربية يبقى سليمًا.

كل المكونات ›