Needless UI

ਕੰਪੋਨੈਂਟ

Color picker

OKLCH ਵਿੱਚ ਰੰਗ, ਸਲਾਈਡਰਾਂ, ਰੰਗ-ਨਮੂਨਿਆਂ, ਆਈਡ੍ਰੌਪਰ ਅਤੇ ਕੰਟ੍ਰਾਸਟ ਜਾਂਚ ਸਮੇਤ।

ਇੰਪੋਰਟ

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

NuiColorPicker

OKLCH ਵਿੱਚ ਕਲਰ ਪਿਕਰ।

ਸਿਲੈਕਟਰ
nui-color-picker
ਨਾਮਟਾਈਪਡਿਫ਼ਾਲਟਵੇਰਵਾ
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

ਰੰਗਾਂ ਲਈ ਫ਼ੰਕਸ਼ਨ।

ਨਾਮਟਾਈਪਡਿਫ਼ਾਲਟਵੇਰਵਾ
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 ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ।