مرجع API

إليك العقد الكامل لـ avatar: كل ما يمكنك ربطه والاستماع إليه وإسقاطه وتنسيقه، مجموعاً في مكان واحد. اربط ما تحتاجه ونسّق ما تريده — إنه standalone وملائم للـ Signals.

المدخلات

اضبط avatar عبر 19 مدخلات. اربطها مثل أي @Input في Angular.

الاسم	النوع	الافتراضي	الوصف
`size`	`string \| number`	`50`	حجم الصورة الرمزية بالبكسل
`name`	`string`	—	اسم المستخدم لإنشاء الأحرف الأولى عند فشل مصادر الصور
`src`	`string \| SafeUrl`	—	عنوان URL لمصدر الصورة المخصصة الأساسي للصورة الرمزية
`alt`	`string`	—	نص بديل لصورة الصورة الرمزية لإتاحة الوصول
`round`	`boolean`	`true`	ما إذا كانت الصورة الرمزية دائرية (true) أو تتبع cornerRadius
`bgColor`	`string`	—	لون خلفية الصور الرمزية النصية. يُنشأ تلقائيًا إذا لم يُحدَّد
`fgColor`	`string`	`#FFF`	لون نص الأحرف الأولى في avatar النصية
`borderColor`	`string`	—	لون الحد حول الصورة الرمزية
`cornerRadius`	`string \| number`	`0`	نصف قطر الزاوية عندما تكون round بقيمة false
`textSizeRatio`	`number`	`3`	النسبة لحساب حجم النص من حجم الصورة الرمزية (size / textSizeRatio)
`initialsSize`	`string \| number`	`0`	يقيّد عدد الأحرف الأولى المعروضة (0 = بلا تقييد)
`facebookId`	`string`	—	معرّف مستخدم Facebook لصورة الملف الشخصي (بأفضل جهد، قد تنطبق قيود API)
`githubId`	`string`	—	اسم مستخدم GitHub لجلب صورة الملف الشخصي
`gravatarId`	`string`	—	بريد Gravatar الإلكتروني أو تجزئة MD5 لجلب صورة الملف الشخصي
`value`	`string`	—	عرض قيمة مخصصة كصورة رمزية (مثل "75%"، "+5")
`style`	`Partial<CSSStyleDeclaration>`	—	أنماط مخصصة لتطبيقها على العنصر الجذر للصورة الرمزية
`referrerpolicy`	`string`	—	سياسة المُحيل لصورة الصورة الرمزية (مثل "no-referrer")
`badge`	`string \| number \| boolean \| null`	—	تراكب الزاوية: `badge` / `[badge]="true"` ← نقطة؛ `badge="4k"` ← شارة بنص؛ null / غياب ← لا شيء.
`badgeColor`	`HubAvatarBadgeColor \| string \| null`	—	لون الشارة الدلالي (primary · secondary · success · danger · warning · info · light · dark) ← `--hub-sys-color-*`.

المخرجات

تفاعل مع ما يفعله avatar — 1 أحداث لربط منطقك بها.

الاسم	النوع	الوصف
`clickOnAvatar`	`Source`	يُطلَق عند النقر على الصورة الرمزية، ويُرجع كائن المصدر النشط الحالي

القوالب

لم يتم توثيق أي قوالب بعد.

متغيّرات CSS

نسّق كل بكسل عبر 11 متغيّرات CSS. تجاوزها عند :root أو حدّد نطاقها على غلاف.

الحجم والتخطيط

تحكَّم في أبعاد avatar والتباعد

المتغيّر	الافتراضي	النوع	الوصف
`--hub-avatar-size`	`50px`	length	حجم avatar الافتراضي عند عدم تحديد حجم `24px40px64px96px`
`--hub-avatar-border-radius`	`50%`	length	نصف قطر استدارة حاوية avatar `04px8px50%`

الألوان والمظهر

خصِّص ألوان avatar ومظهره البصري

المتغيّر	الافتراضي	النوع	الوصف
`--hub-avatar-bg-color`	`var(--hub-sys-color-primary)`	color	لون خلفية avatar النصية `#007bff#28a745#dc3545#6f42c1`
`--hub-avatar-text-color`	`#ffffff`	color	لون نص الأحرف الأولى في avatar النصية `#000000#ffffff#6c757d`
`--hub-avatar-border-color`	`transparent`	color	لون الحدود حول avatar `#dee2e6#007bff#28a745`
`--hub-avatar-border-width`	`0`	length	عرض الحدود حول avatar `1px2px3px`

الطباعة

تحكَّم في مظهر النص في الأحرف الأولى لـ avatar

المتغيّر	الافتراضي	النوع	الوصف
`--hub-avatar-font-family`	`Helvetica, Arial, sans-serif`	string	عائلة الخط للأحرف الأولى في avatar `Inter, sans-serifRoboto, sans-serifsystem-ui`
`--hub-avatar-font-weight`	`normal`	string	وزن الخط للأحرف الأولى في avatar `400500600bold`
`--hub-avatar-text-transform`	`uppercase`	string	تحويل النص للأحرف الأولى `noneuppercaselowercasecapitalize`

محتوى مخصص

تحجيم المحتوى المُسقَط داخل الأفاتار. تأتي الخلفية والمقدّمة من توكنات الأفاتار نفسه.

المتغيّر	الافتراضي	النوع	الوصف
`--hub-avatar-content-padding`	`calc(var(--hub-avatar-size) * 0.2)`	length	الحشو بين المحتوى المُسقَط وحافة الأفاتار. `8px15%calc(var(--hub-avatar-size) * 0.25)`
`--hub-avatar-content-icon-size`	`calc(var(--hub-avatar-size) * 0.55)`	length	حجم الخط لأيقونات الخطوط / الإيموجي المُسقَطة (يرثه الحرف الرسومي). `1.5remcalc(var(--hub-avatar-size) * 0.6)`

التنسيق والسمات

لم يتم توثيق أي أمثلة تنسيق بعد. سيتضمّن هذا القسم وصفات التخصيص وأمثلة السمات.