ایمپورت

import-color-picker.ts
import { NuiColorPicker, nuiParseColor } from '@needless-ui/angular/color-picker';

NuiColorPicker

یک انتخابگر رنگ در OKLCH.

سلکتور
nui-color-picker
NuiColorPicker: ویژگی‌ها
نامنوعپیش‌فرضتوضیح
valueدوطرفهstring''رنگ، نوشته‌شده در قالب انتخاب‌شده. تا وقتی رنگی انتخاب نشود، خالی است.
formatدوطرفه'hex' | 'rgb' | 'hsl' | 'oklch' | 'p3''hex'اینکه مقدار چطور نوشته شود.
formatsورودیNuiColorFormat[]hex, rgb, hsl, oklchقالب‌هایی که دکمهٔ قالب میانشان می‌چرخد.
gamutورودی'srgb' | 'p3''srgb'رنگ‌هایی که ناحیه در بر دارد: sRGB یا Display P3.
alphaورودیbooleantrueاسلایدر شفافیت را نشان می‌دهد.
swatchesورودیNuiColorSwatch[][]رنگ‌هایی برای انتخاب، همراه با نام.
contrastWithورودیstringپس‌زمینه‌ای که کنتراست با آن سنجیده می‌شود.
eyeDropperورودیbooleantrueقطره‌چکان را نشان می‌دهد، جایی که مرورگر آن را دارد.
disabledورودیbooleanfalseقابل تغییر نیست.
labelsورودیPartial<NuiColorPickerLabels>همهٔ متن‌هایی که نشان می‌دهد یا اعلام می‌کند، برای ترجمه.
colorویژگیSignal<NuiColor>رنگ انتخاب‌شده، در OKLCH.

Helpers

توابعی برای رنگ‌ها.

Helpers: ویژگی‌ها
نامنوعپیش‌فرضتوضیح
nuiParseColorمتد(text: string) => NuiColor | nullرنگی را که به هر شیوهٔ CSS نوشته شده باشد می‌خواند.
nuiFormatColorمتد(color, format?) => stringرنگی را در یک قالب می‌نویسد.
nuiToGamutمتد(color, gamut?: 'srgb' | 'p3') => NuiColorرنگی را همان‌طور که CSS انجام می‌دهد، به گسترهٔ sRGB یا Display P3 می‌آورد.
nuiContrastمتد(color, background) => numberنسبت کنتراست WCAG 2 یک رنگ روی یک پس‌زمینه.