Loading :: جاري التحميل

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

الصورة الرمزية هي تمثيل مرئي للمستخدم، يُعرض في الملفات الشخصية أو التعليقات أو تطبيقات المراسلة، مما يعزز مشاركة المستخدم والتعرف على هويته.

تجربة المكون

الأحجام

XXL
XL
L
MD
SM
XS
XXS

الأنواع

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

الشكل

الصورة الرمزية
الصورة الرمزية
<!-- ICON AVATAR -->
<div class="avatar avatar-md">
  <i class="icon-user"></i>
</div>

<!-- TEXT AVATAR -->
<div class="avatar avatar-md">
  <span>XS</span>
</div>

<!-- IMAGE AVATAR -->
<div class="avatar avatar-md">
  <img src="/assets/demo/avatar.jpg" alt="" />
</div>

<!-- ROUNDED AVATAR -->
<div class="avatar avatar-md rounded">
  <img src="/assets/demo/avatar.jpg" alt="" />
</div>

المظهر

يقدم نظام تصميم الأكواد الخاص بالمنصة مجموعة متنوعة من التعديلات على الصور الرمزية، المخصصة لتلبية احتياجات التصميم المتنوعة.

الأنواع

الصور الرمزية متوفرة في ثلاثة أنواع:
  • الحروف المختصرة: يعرض الأحرف الأولى من اسم المستخدم.
  • الصورة: لعرض صورة المستخدم سواء كانت مرفوعة مسبقاً من النظام أو مرفوعة من قبل المستخدم.
  • الأيقونة: يعرض رمزاً يمثل المستخدم، ويتم استخدامه عندما لا يسمح النظام للمستخدم بتغيير الصورة الرمزية أو عندما لا يقوم المستخدم بتغيير الصورة الرمزية الخاصة به بعد.

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

تأتي الصور الرمزية في نظام تصميم التعليمات البرمجية الخاص بالمنصة بأحجام مختلفة، اعتمادًا على حجم الصندوق.
  • 24 بكسل و 32 بكسل (صغير): مناسبة للمساحات الصغيرة، مثل المكونات الصغيرة مثل خلايا الجدول أو المكونات الصغيرة.
  • 40 بكسل و 48 بكسل (متوسط): الحجم القياسي المستخدم في معظم مكونات الواجهة مثل لوحات الملف الشخصي أو البطاقات.
  • 64 بكسل و 80 بكسل و 120 بكسل (كبير): تستخدم بشكل مقتصد لتسليط الضوء على المستخدم أو في المساحات الواسعة. عند استخدام الصور الرمزية الكبيرة، تأكد من أنها تحافظ على التوازن مع المكونات الأخرى في واجهة المستخدم.

عند تحديد الحجم المناسب، يجب وضع حجم الأيقونة والعناصر المحيطة بها في الاعتبار لضمان التناغم البصري والتوازن.

الأسلوب

أشكال الصور الرمزية في كود المنصات: عادةً ما تكون الصور الرمزية في شكل دائري افتراضي أو في شكل مستطيل، مما يساعد في زيادة المرونة لتناسب سياقات التصميم المختلفة ومتطلبات واجهة المستخدم.