کامپوننت‌ها
انتخاب رنگ
انتخاب رنگ برند یا برچسب با نمونه‌رنگ‌ها، پنل انتخاب دلخواه و کد hex، همراه کنتراست متن.
import { ColorPicker } from "@kashi-ui/react";نمونه
متن نمونهکنتراست با متن سفید: ۴٫۸ به ۱ (AA)
یکی را انتخاب کنید یا کد دلخواه بنویسید.
<ColorPicker label="رنگ برند" value={color} onChange={setColor} name="brand" />با زدن روی مربع رنگ، پنل انتخاب دلخواه باز می‌شود: سطح اشباع و روشنایی، نوار رنگ‌مایه، فیلدهای R، G و B، و در مرورگرهایی که پشتیبانی می‌کنند قطره‌چکان برای برداشتن رنگ از صفحه. در سطح رنگ، کلیدهای جهت یک درصد و با Shift ده درصد جابه‌جا می‌کنند.
زیر انتخابگر، کنتراست رنگ با متن سفید یا مشکی (هر کدام بهتر است) نمایش داده می‌شود تا رنگی انتخاب نشود که متن روی آن خوانا نباشد. تابع contrastRatio هم صادر شده است.
| نام | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
value / defaultValue | string | "#0b8077" | رنگ hex |
onChange | (hex: string) => void | — | |
swatches | { name, value }[] | رنگ‌های کاشی | نمونه‌رنگ‌ها؛ [] برای حذف |
showContrast | boolean | true | نمایش کنتراست متن |
name | string | — | فیلد پنهان برای فرم |
دسترس‌پذیری
نمونه‌رنگ‌ها رادیوهای بومی با نام فارسی هستند («فیروزه‌ای»)، نه فقط یک خانهٔ رنگی. کد hex یک فیلد متنی معمولی است، پس کاربر صفحه‌خوان هم می‌تواند رنگ دقیق را وارد کند. سطح رنگ یک slider با مقدار متنی است («اشباع ۹۱٪، روشنایی ۷۰٪») و Esc پنل را می‌بندد و فوکوس را به مربع رنگ برمی‌گرداند.