الصورة الرمزية
صورة رمزية بصورة أو أحرف أولية بأربعة أحجام (20 / 24 / 32 / 36 بكسل) مع تدرجات أولية محايدة وزرقاء - تُستخدم في الجداول والمسارات والقوائم والشريط الجانبي.
BMالتثبيت
يمكنك إضافة مكوّن الصورة الرمزية هذا باستخدام CLI الخاص بنا أو يدويًا:
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.
npx boardui@latest add avatarهل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
الأحجام
أربعة أحجام عبر الحجم الخاصية - xs (20px) عبر lg (36px). يتبع مقياس نوع الأحرف الأولى الحاوية.
<Avatar size="xs" initials="M" /> {/* 20px */}<Avatar size="sm" initials="M" /> {/* 24px */}<Avatar size="md" initials="M" /> {/* 32px */}<Avatar size="lg" initials="M" /> {/* 36px */}الألوان الأولية
تُعرض الأحرف الأولى على neutral أو أزرق السطح عبر اللون الخاصية.
<Avatar color="neutral" initials="M" /> {/* neutral surface */}<Avatar color="blue" initials="B" /> {/* blue tint */}الصورة
تمرير src و alt لصورة رمزية بالصورة الشخصية. تعمل الأحرف الأولى كبديل أثناء تحميل الصورة أو في حال فشلها.
{/* Photo avatars take a src + alt; initials are the fallback */}<Avatar size="md" src="/avatars/livia-saris.webp" alt="Livia Saris" />