Color Swatchv1.0.0
مربع یا دایرهٔ کوچکی که یک رنگ را نشان می‌دهد: پایه‌ای‌ترین کامپوننت خانوادهٔ Color، برای پیش‌نمایش در ColorField و ColorPicker یا خودِ آن به‌عنوان نمونهٔ رنگ در یک پالت.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/color-swatch.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/color-swatch.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/color-swatch.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/color-swatch.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { ColorSwatch } from "@/components/ui/color-swatch"
<ColorSwatch color="#7c3aed" />این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
مقدار color هم رشته (هر فرمتی که parseColor از @/lib/color می‌فهمد: hex/hexa/rgb/rgba/hsl/hsla/hsb/hsba) و هم یک Color از قبل پارس‌شده را می‌پذیرد. توکن CSS مثل var(--chart-3) هم قبول است: رشته‌ای که پارس نشود مستقیم به CSS داده می‌شود تا مرورگر resolve کند، پس با عوض‌شدن تم رنگ سواچ هم عوض می‌شود.
رشته‌ای که نه پارس شود و نه رنگ CSS معتبر باشد به‌جای کرش‌کردن یک حالت خنثی (بدون رنگ، فقط شطرنجی) نشان می‌دهد. برای توکن‌ها prop label بدهید تا صفحه‌خوان نام رنگ را بخواند.
پس‌زمینهٔ شطرنجی از CHECKERBOARD_STYLE در lib/color.ts می‌آید، همان چیزی که ColorSlider (کانال آلفا) و مربع ColorPicker هم استفاده می‌کنند، پس شفافیت همه‌جا یک شکل دیده می‌شود.
دسترس‌پذیری
- خودش role="img" با aria-label توصیفی دارد (مثل «رنگ #7c3aed»)، پس نیازی به aria-label دستی نیست مگر بخواهید متن دیگری جایگزین کنید.
- برای گروهی از رنگ‌های قابل‌انتخاب (نه فقط نمایشی) از ColorSwatchPickerItem استفاده کنید، نه چند ColorSwatch کنار هم با onClick دستی: آنجا role و کیبورد درست مدیریت می‌شود.
- حاشیهٔ ثابت (border-border) باعث می‌شود سواچِ رنگ‌های خیلی روشن یا سفید هم روی پس‌زمینهٔ هم‌رنگ خودش قابل‌تشخیص بماند.
مرجع API
ColorSwatch
تمام ویژگی‌های استاندارد div نیز پشتیبانی می‌شود.
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| color | string | Color | — | رشتهٔ رنگ (hex/rgb/hsl/hsb)، توکن CSS مثل var(--chart-3)، یا یک Color از قبل پارس‌شده (از parseColor در @/lib/color). |
| label | string | — | نام خوانای رنگ برای صفحه‌خوان؛ بدون آن کد hex خوانده می‌شود. |
| size | "sm" | "md" | "lg" | "md" | اندازهٔ سواچ. |
| radius | "none" | "sm" | "md" | "full" | "md" | شعاع گوشهٔ سواچ. |
| className | string | — | کلاس‌های تکمیلی. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
Sizes
سه اندازه: sm، md (پیش‌فرض) و lg.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
Radius
چهار شعاع گوشه: none، sm، md (پیش‌فرض) و full.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
Alpha / شفافیت
برای رنگ‌های نیم‌شفاف، پس‌زمینهٔ شطرنجی خودکار زیرشان دیده می‌شود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
فرمت‌های ورودی
هر رشتهٔ رنگ استانداردی که lib/color.ts می‌شناسد قابل قبول است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
توکن تم
برای رنگ دسته‌ها و سری‌ها توکن‌های --chart-1 تا --chart-8 را بدهید؛ در تم تیره خودشان عوض می‌شوند. label نام رنگ را به صفحه‌خوان می‌دهد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
پالت رنگ
چیدمانِ چند سواچِ کنار هم برای نمایش یک پالت: الگویی که در ColorSwatchPickerItem هم استفاده می‌شود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| Sizes | سه اندازه: sm، md (پیش‌فرض) و lg. |
| Radius | چهار شعاع گوشه: none، sm، md (پیش‌فرض) و full. |
| Alpha / شفافیت | برای رنگ‌های نیم‌شفاف، پس‌زمینهٔ شطرنجی خودکار زیرشان دیده می‌شود. |
| فرمت‌های ورودی | هر رشتهٔ رنگ استانداردی که lib/color.ts می‌شناسد قابل قبول است. |
| توکن تم | برای رنگ دسته‌ها و سری‌ها توکن‌های --chart-1 تا --chart-8 را بدهید؛ در تم تیره خودشان عوض می‌شوند |
| پالت رنگ | چیدمانِ چند سواچِ کنار هم برای نمایش یک پالت: الگویی که در ColorSwatchPickerItem هم استفاده می‌شود. |
دستورالعمل استفاده
اندازهٔ یکسان برای مقایسه
انجام بده
وقتی چند سواچ کنار هم برای مقایسه یا انتخاب می‌آیند، همه یک size بگیرند.
انجام نده
اندازه‌های مختلف کنار هم به‌جای انتقال معنا فقط بی‌نظمی بصری می‌سازد.
رشتهٔ رنگِ معتبر بدهید
انجام بده
یک رنگ واقعی (hex/rgb/hsl) یا توکن تم (var(--chart-3)) پاس بدهید.
انجام نده
رشتهٔ نامعتبر یا خالی فقط یک سواچِ خنثی و شطرنجی می‌سازد: عملاً بی‌فایده.