Color Swatch Picker

فهرستی از رنگ‌های از پیش‌تعیین‌شده (پالت برند، رنگ برچسب، رنگ تم) که کاربر با کلیک یا کیبورد یکی را انتخاب می‌کند: برخلاف ColorPicker که هر رنگی را می‌سازد، این فقط بین گزینه‌های ثابت یکی را برمی‌گزیند.

این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.

این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

نصب

با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.

pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/color-swatch-picker.json

npx dig-ui@latest add https://design-system-tau-green.vercel.app/r/color-swatch-picker.json

yarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/color-swatch-picker.json

bunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/color-swatch-picker.json

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Reka UI در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Bits UI در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Angular CDK در دست کار است.

استفاده

import { ColorSwatchPicker, ColorSwatchPickerItem } from "@/components/ui/color-swatch-picker"

<ColorSwatchPicker defaultValue="#6366f1" onValueChange={(color) => console.log(color)}>
  <ColorSwatchPickerItem color="#ef4444" />
  <ColorSwatchPickerItem color="#6366f1" />
</ColorSwatchPicker>

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Reka UI در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Bits UI در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Angular CDK در دست کار است.

ترکیب اجزا

همان الگوی roving-tabindex که RadioGroup/RadioGroupItem دارند: ColorSwatchPicker یک role="radiogroup" با Context مقدارِ انتخاب‌شده است، ColorSwatchPickerItem یک role="radio" با یک ColorSwatch داخلش. برخلاف RadioGroupItem که مقدار را از خصوصیت DOM دکمه می‌خواند، اینجا با next.click() به onClick خودِ آیتم می‌رسد، چون رنگ در closure همان آیتم است، نیازی به نوشتنش روی DOM نیست. size/radius را روی خودِ ColorSwatchPicker بدهید تا به همهٔ آیتم‌ها از Context برسد؛ یکی‌یکی روی هر Item دادنش لازم نیست.

دسترس‌پذیری

فقط یک آیتم (انتخاب‌شده، یا اولی اگر هنوز چیزی انتخاب نشده) در چرخهٔ Tab است؛ داخل گروه با پیکان‌ها جابه‌جا شوید: دقیقاً مثل هر radiogroup استاندارد.
پیکان‌های چپ/راست در RTL خودکار برعکس می‌شوند (بالا/پایین هم مثل چپ/راست عمل می‌کنند تا در چیدمان‌های چندردیفه هم قابل‌پیمایش بماند).
هر آیتم aria-label خودکار از کد رنگش می‌سازد (مثل «رنگ #6366f1»)؛ اگر رنگ‌ها معنای خاصی دارند (مثل «قرمز فوری»)، aria-label دستی بدهید تا معنا هم منتقل شود، نه فقط کد.
روی رنگ انتخاب‌شده یک تیک با کنتراست خودکار (سفید روی رنگ تیره، مشکی روی رنگ روشن) نشان داده می‌شود: نه فقط یک حاشیه که ممکن است روی برخی رنگ‌ها کم‌رنگ دیده شود.

مرجع API