مكوّن Avatar لـ Angular | ng-hub-ui-avatar
مكوّن avatar لـ Angular مع الأحرف الأولى وصور احتياطية وشارات حضور ومتغيرات CSS لواجهات هوية المستخدم القابلة لإعادة الاستخدام.
نظرة عامة
لماذا تبحث الفِرَق عن هذه المكتبة
اختر مكوّن avatar هذا لـ Angular عندما تحتاج إلى واجهة هوية مستخدم متينة مع بدائل احتياطية وأحرف أولى ومزوّدي صور متعددين وخطافات تنسيق ملائمة لأنظمة التصميم.
التثبيت
npm install ng-hub-ui-avatarانتقل إلى
مثالي لـ
- قوائم المستخدمين
- قوائم الفرق
- موجزات النشاط
- بطاقات الملف الشخصي
حول avatar
يساعد ng-hub-ui-avatar تطبيقات Angular على عرض المستخدمين باتساق عبر القوائم وبطاقات الملف الشخصي والواجهات التعاونية. يغطّي الحالات الحدّية الشائعة مثل الصور المفقودة، وتوليد الأحرف الأولى، ومؤشرات الحالة، وقواعد الحجم المشتركة.
أدلّة الميزات
مصادر الصور الرمزية
حُلّ الصور الرمزية من الملفات الاجتماعية أو الصور المخصّصة أو الأحرف الأولى للاسم أو قيمة مخصّصة، مع بديل تلقائي.
أمثلة:
ملف Facebook الشخصي
ملف Facebook الشخصي
Gravatar
Gravatar
ملف GitHub الشخصي
ملف GitHub الشخصي
مصدر صورة مخصص
مصدر صورة مخصص
الأحرف الأولى من الاسم
الأحرف الأولى من الاسم
عرض القيمة
عرض القيمة
نظام البدائل
تدرّج بسلاسة عبر كل مصدر مهيّأ حتى يُعرَض تمثيل ذو معنى.
أمثلة:
نظام البدائل
نظام البدائل
Showing GitHub source (Facebook ID invalid)
تحديد الحجم
تحكّم في أبعاد الصورة الرمزية ونسبة النص إلى الحجم وعدد الأحرف الأولى المعروضة.
أمثلة:
حجم مخصص
حجم مخصص
نسبة حجم النص
نسبة حجم النص
حدّ حجم الأحرف الأولى
حدّ حجم الأحرف الأولى
التنسيق
الشكل ونصف قطر الزاوية والألوان والحدود والأنماط المضمّنة الاعتباطية — كلها مُدارة عبر المُدخلات ومتغيرات CSS.
أمثلة:
صورة رمزية دائرية
صورة رمزية دائرية
استدارة الزوايا
استدارة الزوايا
لون الخلفية والمقدّمة
لون الخلفية والمقدّمة
لون الحدّ
لون الحدّ
أنماط مخصصة
أنماط مخصصة
التفاعلية
تفاعل مع تفاعل المستخدم عبر حدث النقر على الصورة الرمزية.
أمثلة:
معالج حدث النقر
معالج حدث النقر
المجموعات والشارة
كدّس الأفاتارات في مجموعة، وأضف شارة في الزاوية — نقطة حضور أو عدّاد — ملوّنة من اللوحة الدلالية.
أمثلة:
عرض مجموعة الصور الرمزية
عرض مجموعة الصور الرمزية
شارة (نقطة وعدّاد)
شارة (نقطة وعدّاد)
محتوى مخصص
أسقِط أي أيقونة أو SVG مضمّن أو صورة أو إيموجي داخل الأفاتار. يُوسَّط ويُضاف إليه حشو ويُقصّ وفق شكل الأفاتار، ويُحجَّم بشكل محايد (أيقونات الخطوط تتكيّف، وSVG/الصور تملأ)، ويُنسَّق عبر مدخلَي bgColor / fgColor المعتادَين.
أمثلة:
محتوى مخصص (أيقونات، SVG)
محتوى مخصص (أيقونات، SVG)
الميزات الرئيسية
التغييرات الأخيرة
Version 19.0.3 - 9/15/24, 12:00 AM
added: Comprehensive documentation page with functional examples