الكمية

تجريبي

عدّاد الكمية لصفحة المنتج والسلة: إنقاص والعدد وزيادة، من 1 إلى المخزون المتوفر.

المعاينة

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

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

quantity.tsx

import { Quantity } from "@/components/ui/quantity";<Quantity value={quantity} onValueChange={setQuantity} max={stock} />

الخاصية	النوع	الافتراضي	الوصف
`value / defaultValue / onValueChange`	`number`	`1`	العدد.
`min`	`number`	`1`	أقل عدد. سطر السلة يُحذف بزرّ الإزالة، لا بالنزول إلى صفر.
`max`	`number`	لا يوجد	المخزون المتوفر.
`size`	`"md" \| "sm"`	`"md"`	خاصية Size: أزرار 40 بكسل لصفحة المنتج و32 للسلة.
`label`	`string`	لا يوجد	اسم الحقل. في السلة أضف اسم المنتج («الكمية، كرسي لينا»).
`decrementLabel / incrementLabel`	`string`	لا يوجد	اسما الزرّين. افتراضيًا «إنقاص الكمية» و«زيادة الكمية».
`name / disabled`	`…`	لا يوجد	كما في حقل الأرقام.

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

المفتاح	ما يفعله
`ArrowUpArrowDown`	يزيد وينقص واحدًا.
`Tab`	إنقاص ثم الحقل ثم زيادة.

الحقل spinbutton بين زرّين مسمّيين؛ الزرّ يتعطّل عند الحد الأدنى والأقصى.
الزرّان مرسومان 40 و32 بكسل، ومنطقة اللمس 48 بكسل طولًا، لا عرضًا كي لا تغطي العدد.