CSS: avatar

.instui-avatar · stable — صورة رمزية للمستخدم تعرض الحروف الأولى أو صورة، دائرية بشكل افتراضي.

بشكل افتراضي، يصبغ لون اللوحة الحروف الأولى على سطح شفاف؛ -has-inverse-color يملأ السطح باللون ويضع الحروف الأولى بلون مطابق. المتغير -color-ai يملأ دائمًا بتدرج البنفسجي→البحري. لاسم عرض كامل، ضعه في المحتوى (حتى يبقى في شجرة إمكانية الوصول) وأضف data-initials="XX" للعرض المضغوط — النص الحقيقي هو ما تقرأه برامج القراءة للشاشة. بدون data-initials، يتم قطع المحتوى المتجاوز بقسوة (بدون نقاط الحذف)؛ غلفه بـ .name لقص حرف قيادي واحد بدقة، أو قَسّمه إلى .first-name/.last-name لحرفين مقطوعين (يمكن حذف أي نصف ويظل الآخر مركزًا).

Source: avatar.css

TIP

JS Enhancement — CSS هذا المكوّن يعرض ويعمل بمفرده؛ زَوجه مع @pantoken/interactions لإضافة السلوك التفاعلي. راجع جدول المعدّلات أدناه.

Accessibility

أعطِ الصورة الرمزية القائمة على صورة alt ذات معنى (اسم الشخص)، لا "avatar" عامة؛ لصور الحروف الأولى فقط، فضّل محتوى الاسم الحقيقي (نص عادي، data-initials، .name، أو .first-name/.last-name) على الحروف المختصرة مسبقًا، حتى تُعلن تقنيات المساعدة الاسم الحقيقي.

Usage

@import "@pantoken/components/components.css";
@import "@pantoken/components/avatar.css";

Examples

<span class="instui-avatar --me-sm">LH</span>
<span class="instui-avatar -color-ai --me-sm">AI</span>
<span class="instui-avatar --me-sm" data-initials="NV">د. Nguyen Van Thoc</span>
<span class="instui-avatar"><span class="name">ميغيل سانشيز</span></span>
<span class="instui-avatar"><span class="first-name">ميغيل</span> <span class="last-name">سانشيز</span></span>

Structure

تُظهر الصورة الرمزية أحد العناصر: <img>، نص عاري/data-initials، غلاف .name، أو زوج .first-name/.last-name.

.instui-avatar
  img (0..1)
  .name (0..1)
  .first-name (0..1)
  .last-name (0..1)

flowchart TD n0[".instui-avatar"]:::cssdoc-root n1("img"):::cssdoc-part n2(".name"):::cssdoc-part n3(".first-name"):::cssdoc-part n4(".last-name"):::cssdoc-part n0 -.->|0..1| n1 n0 -.->|0..1| n2 n0 -.->|0..1| n3 n0 -.->|0..1| n4 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Modifiers

Modifier	Description
.-color-accent1	Deprecated — use .-color-blue.
.-color-accent2	Deprecated — use .-color-green.
.-color-accent3	Deprecated — use .-color-red.
.-color-accent4	Deprecated — use .-color-orange.
.-color-accent5	Deprecated — use .-color-ash.
.-color-accent6	Deprecated — use .-color-grey.
.-color-ai	لون لوحة مميّز للذكاء الاصطناعي.
.-color-ash	Deprecated — use .-color-grey.
.-color-blue	لون لوحة أزرق.
.-color-green	لون لوحة أخضر.
.-color-grey	لون لوحة رمادي.
.-color-orange	لون لوحة برتقالي.
.-color-red	لون لوحة أحمر.
.-has-inverse-color	استخدم لون النص المعكوس (على خلفية داكنة).
.-shape-rectangle	شكل مربع (مستطيل) بدلاً من دائرة.
.-show-border	Alias — maps to .-show-border-always.
.-show-border-always	أجبِر حلقة الحدود على الظهور، حتى فوق صورة أو تعبئة معكوسة.
.-show-border-never	أطفئ حلقة الحدود قسريًا.
.-size-2xl	أكبر بمقاسين.
.-size-2xs	أصغر بمقاسين.
.-size-large	اسم مرادف مطوّل لـ -size-md.
.-size-lg	كبير.
.-size-md	متوسط (الافتراضي).
.-size-medium	متوسط (الافتراضي). اسم مستعار طويل لـ -size-md.
.-size-sm	صغير.
.-size-small	اسم مرادف مطوّل لـ -size-sm.
.-size-x-large	ضخم جدًا. اسم مستعار طويل لـ -size-xl.
.-size-x-small	صغير جدًا. اسم مستعار طويل لـ -size-xs.
.-size-xl	ضخم جدًا.
.-size-xs	صغير جدًا.
.-size-xx-large	أكبر بمقاسين. اسم مستعار طويل لـ -size-2xl.
.-size-xx-small	أصغر بمقاسين. اسم مستعار طويل لـ -size-2xs.

Parts

Part	Description
.first-name	اختياري (يرتبط بـ .last-name): يغلف الاسم المعطى، مقطوعًا إلى حرفه القيادي.
.last-name	اختياري (يرتبط بـ .first-name): يغلف اسم العائلة، مقطوعًا إلى حرفه القيادي.
.name	Optional: wrap the full name to clip it to a single leading letter without data-initials or JS.

Pseudo-elements

Pseudo-element	Description
::before	—

Tokens consumed

Token	Type	Value
--instui-component-avatar-ai-bottom-gradient-color	<color>	#00828E
--instui-component-avatar-ai-top-gradient-color	<color>	#9E58BD
--instui-component-avatar-ash-background-color	<color>	LightDarklight-dark(#273540, #1C222B)
--instui-component-avatar-ash-text-color	<color>	LightDarklight-dark(#273540, #C7CACD)
--instui-component-avatar-background-color	<color>	LightDarklight-dark(#ffffff, #10141A)
--instui-component-avatar-blue-background-color	<color>	#2B7ABC
--instui-component-avatar-blue-text-color	<color>	LightDarklight-dark(#2871AF, #7FB4F1)
--instui-component-avatar-border-color	<color>	LightDarklight-dark(#8D959F, #6A7883)
--instui-component-avatar-border-width-md	<length>	0.125rem
--instui-component-avatar-border-width-sm	<length>	0.0625rem
--instui-component-avatar-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-avatar-font-size-lg	<length>	1.25rem
--instui-component-avatar-font-size-md	<length>	1rem
--instui-component-avatar-font-size-sm	<length>	0.875rem
--instui-component-avatar-font-size-xl	<length>	1.75rem
--instui-component-avatar-font-size-xs	<length>	0.75rem
--instui-component-avatar-font-size2xl	<length>	2.25rem
--instui-component-avatar-font-size2xs	<length>	0.75rem
--instui-component-avatar-font-weight	<integer>	600
--instui-component-avatar-green-background-color	<color>	#03893D
--instui-component-avatar-green-text-color	<color>	LightDarklight-dark(#037D37, #61C378)
--instui-component-avatar-grey-background-color	<color>	LightDarklight-dark(#4A5B68, #576773)
--instui-component-avatar-grey-text-color	<color>	LightDarklight-dark(#4A5B68, #F2F4F5)
--instui-component-avatar-orange-background-color	<color>	#CF4A00
--instui-component-avatar-orange-text-color	<color>	LightDarklight-dark(#B23F01, #FF905A)
--instui-component-avatar-rectangle-radius	<length>	0.25rem
--instui-component-avatar-red-background-color	<color>	#E62429
--instui-component-avatar-red-text-color	<color>	LightDarklight-dark(#CF1F24, #FA917F)
--instui-component-avatar-size-lg	<length>	3.5rem
--instui-component-avatar-size-md	<length>	3rem
--instui-component-avatar-size-sm	<length>	2.5rem
--instui-component-avatar-size-xl	<length>	4rem
--instui-component-avatar-size-xs	<length>	2rem
--instui-component-avatar-size2xl	<length>	5rem
--instui-component-avatar-size2xs	<length>	1.5rem
--instui-component-avatar-text-on-color	<color>	#ffffff

Related

• byline — يمكن أن يستضيف صورة رمزية باعتبارها عنصره الرئيسي البارز.