Needless UI

Vijenzi

Kichagua rangi

Rangi katika OKLCH, yenye vitelezi, sampuli za rangi, eyedropper na ukaguzi wa utofautishaji.

Kuingiza

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

NuiColorPicker

Kichagua rangi katika OKLCH.

Kiteuzi
nui-color-picker
JinaAinaChaguomsingiMaelezo
valuePande mbilistring''Rangi, iliyoandikwa kwa umbizo. Tupu hadi rangi ichaguliwe.
formatPande mbili'hex' | 'rgb' | 'hsl' | 'oklch' | 'p3''hex'Jinsi thamani inavyoandikwa.
formatsInputNuiColorFormat[]hex, rgb, hsl, oklchMaumbizo ambayo kitufe cha umbizo hupitia.
gamutInput'srgb' | 'p3''srgb'Rangi zilizomo katika eneo: sRGB, au Display P3.
alphaInputbooleantrueHuonyesha kitelezi cha opacity.
swatchesInputNuiColorSwatch[][]Rangi za kuchagua, zenye majina.
contrastWithInputstringMandharinyuma ya kukagua utofautishaji dhidi yake.
eyeDropperInputbooleantrueHuonyesha eyedropper, pale kivinjari kina moja.
disabledInputbooleanfalseHaiwezi kubadilishwa.
labelsInputPartial<NuiColorPickerLabels>Kila maandishi ambayo kichagua husema, ili kuyatafsiri.
colorSifaSignal<NuiColor>Rangi iliyochaguliwa, katika OKLCH.

Helpers

Function za rangi.

JinaAinaChaguomsingiMaelezo
nuiParseColorMbinu(text: string) => NuiColor | nullHusoma rangi katika sintaksia yoyote ya CSS.
nuiFormatColorMbinu(color, format?) => stringHuandika rangi katika umbizo fulani.
nuiToGamutMbinu(color, gamut?: 'srgb' | 'p3') => NuiColorHuleta rangi ndani ya sRGB au Display P3, kama CSS inavyofanya.
nuiContrastMbinu(color, background) => numberUwiano wa utofautishaji wa WCAG 2 wa rangi juu ya mandharinyuma.