عنصر السلة

تجريبي

احصل على Ritla UI

سطر في السلة: الصورة والاسم والخيارات المختارة وعدّاد الكمية، ثم السعر وزرّ الإزالة.

افتح في Figma

المعاينة

«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

أضف المكوّن
$ npx ritla add cart-item
ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/cart-item
الاعتماديات التي يضيفها
icon-buttonpriceproduct-imagequantity
أو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

cart-item.tsx

import { CartItem } from "@/components/ui/cart-item";<ul>  <CartItem name="Lina lounge chair, oak" options="Cream · Linen" price={{ amount: 288 }} quantity={1} onQuantityChange={setQuantity} onRemove={remove} /></ul>

مرجع الخصائص

CartItem

الخاصية	النوع	الافتراضي	الوصف
`name / href`	`string`	لا يوجد	الاسم، ورابطه إلى صفحة المنتج.
`options`	`ReactNode`	لا يوجد	الخيارات سطرًا واحدًا («كريمي · كتان»).
`image`	`{ src?, alt? }`	لا يوجد	صورة مربعة 96 بكسل.
`price`	`{ amount, compareAt? … }`	لا يوجد	سعر السطر (سعر القطعة × الكمية كما تحسبه سلتك).
`quantity / onQuantityChange / maxQuantity`	`number`	لا يوجد	عدّاد Quantity الصغير.
`onRemove`	`() => void`	لا يوجد	زرّ الإزالة، باسم المنتج («إزالة كرسي لينا»).

إمكانية الوصول

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	الاسم ثم الكمية ثم الإزالة.

ARIA

عنصر li: ضع الأسطر في ul فتُقرأ «قائمة من سطرين».
الكمية والإزالة باسم المنتج، فلا تسمع «إزالة» ثلاث مرات دون أن تعرف ماذا.

ملاحظات العربية والاتجاه

ينعكس

الصورة على اليمين والسعر وزرّ الإزالة على اليسار.

لا ينعكس

الصورة ورمز السلة لا ينعكسان، والمبلغ معزول.

الأرقام: السعر والكمية يتبعان numerals.
الخط العربي: label-16 Medium للاسم وlabel-14 بلون gray/muted للخيارات.