ألوان المنتج

تجريبي

احصل على Ritla UI

ألوان المنتج دوائرَ يختار منها المشتري، مجموعةَ اختيار باسم اللون المختار بجانب عنوانها.

افتح في Figma

المعاينة

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

التثبيت

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

الاستخدام

color-swatch.tsx

import { ColorSwatchGroup } from "@/components/ui/color-swatch";<ColorSwatchGroup  label="Color"  name="color"  options={[    { value: "cream", name: "Cream", color: "#d9c7ad" },    { value: "olive", name: "Olive", color: "#6b6b3a" },  ]}/>

مرجع الخصائص

ColorSwatchGroup

الخاصية	النوع	الافتراضي	الوصف
`label`	`ReactNode`	لا يوجد	اسم المجموعة («اللون»)، ويليه اسم اللون المختار.
`options`	`{ value, name, color, disabled? }[]`	لا يوجد	الألوان. `color` لون المنتج نفسه، أي لون CSS: هو بيانات المنتج لا رمز تصميم.
`value / defaultValue / onValueChange`	`string`	لا يوجد	اللون المختار. افتراضيًا الأول.
`name`	`string`	لا يوجد	اسم الحقل في النموذج.
`hideLabel`	`boolean`	`false`	يخفي سطر العنوان، ويبقى اسم المجموعة لقارئات الشاشة.

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

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

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

المفتاح	ما يفعله
`ArrowRightArrowLeft`	بين الألوان؛ في العربية التالي ArrowLeft.
`Tab`	يدخل المجموعة على اللون المختار ويخرج منها.

ARIA

مجموعة radiogroup باسم عنوانها، وكل دائرة radio باسم لونها («كريمي»)، لأن اللون وحده لا يُرى للجميع.
اللون غير المتوفر disabled، ويقول اسمه ذلك («صدئي، نفدت الكمية»).

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

ينعكس

الدوائر تبدأ من اليمين، والأسهم تنعكس.

لا ينعكس

الألوان نفسها لا تتغير.

الأرقام: لا أرقام فيها.
الخط العربي: label-14 Medium للعنوان، واسم اللون بلون gray/muted.