Color Swatch
مربع یا دایرهٔ کوچکی که یک رنگ را نشان میدهد: پایهایترین کامپوننت خانوادهٔ Color، برای پیشنمایش در ColorField و ColorPicker یا خودِ آن بهعنوان نمونهٔ رنگ در یک پالت.
این کامپوننت فعلاً برای ۱ فریمورک از ۴ فریمورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
نصب
با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگیها و فایلها خودکار اضافه میشوند.
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/color-swatch.jsonnpx dig-ui@latest add https://design-system-tau-green.vercel.app/r/color-swatch.jsonyarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/color-swatch.jsonbunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/color-swatch.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
استفاده
import { ColorSwatch } from "@/components/ui/color-swatch"
<ColorSwatch color="#7c3aed" />این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
ترکیب اجزا
دسترسپذیری
- خودش role="img" با aria-label توصیفی دارد (مثل «رنگ #7c3aed»)، پس نیازی به aria-label دستی نیست مگر بخواهید متن دیگری جایگزین کنید.
- برای گروهی از رنگهای قابلانتخاب (نه فقط نمایشی) از ColorSwatchPickerItem استفاده کنید، نه چند ColorSwatch کنار هم با onClick دستی: آنجا role و کیبورد درست مدیریت میشود.
- حاشیهٔ ثابت (border-border) باعث میشود سواچِ رنگهای خیلی روشن یا سفید هم روی پسزمینهٔ همرنگ خودش قابلتشخیص بماند.
مرجع API
ColorSwatch
تمام ویژگیهای استاندارد div نیز پشتیبانی میشود.
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| color | string | Color | — | رشتهٔ رنگ (hex/rgb/hsl/hsb) یا یک Color از قبل پارسشده (از parseColor در @/lib/color). |
| size | "sm" | "md" | "lg" | "md" | اندازهٔ سواچ. |
| radius | "none" | "sm" | "md" | "full" | "md" | شعاع گوشهٔ سواچ. |
| className | string | — | کلاسهای تکمیلی. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
نمونهها
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 پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
پالت رنگ
چیدمانِ چند سواچِ کنار هم برای نمایش یک پالت: الگویی که در ColorSwatchPickerItem هم استفاده میشود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار میآید |
|---|---|
| Sizes | سه اندازه: sm، md (پیشفرض) و lg. |
| Radius | چهار شعاع گوشه: none، sm، md (پیشفرض) و full. |
| Alpha / شفافیت | برای رنگهای نیمشفاف، پسزمینهٔ شطرنجی خودکار زیرشان دیده میشود. |
| فرمتهای ورودی | هر رشتهٔ رنگ استانداردی که lib/color.ts میشناسد قابل قبول است. |
| پالت رنگ | چیدمانِ چند سواچِ کنار هم برای نمایش یک پالت: الگویی که در ColorSwatchPickerItem هم استفاده میشود. |
دستورالعمل استفاده
اندازهٔ یکسان برای مقایسه
انجام بده
وقتی چند سواچ کنار هم برای مقایسه یا انتخاب میآیند، همه یک size بگیرند.
انجام نده
اندازههای مختلف کنار هم بهجای انتقال معنا فقط بینظمی بصری میسازد.
رشتهٔ رنگِ معتبر بدهید
انجام بده
همیشه یک رنگ واقعی (hex/rgb/hsl) پاس بدهید.
انجام نده
رشتهٔ نامعتبر یا خالی فقط یک سواچِ خنثی و aria-label «رنگ نامعتبر» میسازد: عملاً بیفایده.