صورة المنتج
صورة المنتج بنسبة ثابتة، تُقصّ لتملأ إطارها، وعلى سطح هادئ ريثما تُحمَّل أو حين لا توجد صورة.
المعاينة
«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.
المعاينةالكود
إنجليزيمعكوسعربي
← RTL
التثبيت
أضف المكوّن
npx ritla add product-imageويعمل أيضًا مع shadcn:
npx shadcn@latest add @ritla/product-imageأو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.
الاستخدام
import { ProductImage } from "@/components/ui/product-image";<ProductImage src="/products/lina-chair.jpg" alt="Lina lounge chair in oak, front view" ratio="4:5" />مرجع الخصائص
ProductImage
أي خاصية أخرى لعنصر <img> تمر كما هي (loading، sizes…).
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
src | string | لا يوجد | الصورة. دونها يظهر البديل: سطح surface/high ورمز صورة. |
alt | string | لا يوجد | مطلوب. ما تُظهره الصورة؛ فارغ حين يجاورها اسم المنتج. |
ratio | "1:1" | "4:5" | "3:4" | "1:1" | خاصية Ratio: المربع للشبكات والسلة، والطولي للأزياء وصفحة المنتج. |
إمكانية الوصول
ARIA
- الصورة عنصر
imgبنصّ بديل يصف المنتج؛ في بطاقة فيها الاسم يكون النص فارغًا كي لا يُقرأ الاسم مرتين. - رمز البديل زخرفي، إلا إذا أعطيت
alt.
ملاحظات العربية والاتجاه
ينعكس
- لا شيء: الإطار نفسه في الاتجاهين.
لا ينعكس
- الصورة لا تنعكس أبدًا: منتج بشعار أو كتابة يصبح خطأً إن قُلب.
- الأرقام
- لا أرقام فيها.
- الخط العربي
- لا نص فيها.