Needless UI

Mga component

Color picker

Isang kulay sa OKLCH, may mga slider, swatch, eyedropper at contrast check.

Import

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

NuiColorPicker

Isang color picker sa OKLCH.

Selector
nui-color-picker
PangalanUriDefaultPaglalarawan
valueTwo-waystring''Ang kulay, nakasulat sa format. Walang laman hanggang may mapili.
formatTwo-way'hex' | 'rgb' | 'hsl' | 'oklch' | 'p3''hex'Kung paano isinusulat ang value.
formatsInputNuiColorFormat[]hex, rgb, hsl, oklchAng mga format na pinagsasalit-salitan ng format button.
gamutInput'srgb' | 'p3''srgb'Ang mga kulay na laman ng area: sRGB, o Display P3.
alphaInputbooleantrueIpinapakita ang opacity slider.
swatchesInputNuiColorSwatch[][]Mga kulay na mapagpipilian, may mga pangalan.
contrastWithInputstringIsang background na pagsusukatan ng contrast.
eyeDropperInputbooleantrueIpinapakita ang eyedropper, kapag mayroon nito ang browser.
disabledInputbooleanfalseHindi ito mababago.
labelsInputPartial<NuiColorPickerLabels>Bawat text na sinasabi nito, para maisalin.
colorPropertySignal<NuiColor>Ang napiling kulay, sa OKLCH.

Helpers

Mga function para sa mga kulay.

PangalanUriDefaultPaglalarawan
nuiParseColorMethod(text: string) => NuiColor | nullBinabasa ang kulay sa kahit anong CSS syntax.
nuiFormatColorMethod(color, format?) => stringIsinusulat ang kulay sa isang format.
nuiToGamutMethod(color, gamut?: 'srgb' | 'p3') => NuiColorIpinapasok ang kulay sa sRGB o Display P3, gaya ng ginagawa ng CSS.
nuiContrastMethod(color, background) => numberAng WCAG 2 contrast ratio ng isang kulay sa isang background.