Needless UI

Componenti

Selettore di colore

Un colore in OKLCH, con slider, campioni, contagocce e verifica del contrasto.

Import

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

NuiColorPicker

Un selettore di colore in OKLCH.

Selettore
nui-color-picker
NomeTipoPredefinitoDescrizione
valueBidirezionalestring''Il colore, scritto nel formato scelto. Vuoto finché non se ne sceglie uno.
formatBidirezionale'hex' | 'rgb' | 'hsl' | 'oklch' | 'p3''hex'Come viene scritto il valore.
formatsInputNuiColorFormat[]hex, rgb, hsl, oklchI formati tra cui passa il pulsante del formato.
gamutInput'srgb' | 'p3''srgb'I colori contenuti nell’area: sRGB o Display P3.
alphaInputbooleantrueMostra lo slider dell’opacità.
swatchesInputNuiColorSwatch[][]Colori tra cui scegliere, con i loro nomi.
contrastWithInputstringUno sfondo con cui verificare il contrasto.
eyeDropperInputbooleantrueMostra il contagocce, dove il browser ne ha uno.
disabledInputbooleanfalseNon si può modificare.
labelsInputPartial<NuiColorPickerLabels>Ogni testo che annuncia, da tradurre.
colorProprietàSignal<NuiColor>Il colore scelto, in OKLCH.

Helpers

Funzioni per i colori.

NomeTipoPredefinitoDescrizione
nuiParseColorMetodo(text: string) => NuiColor | nullLegge un colore in qualsiasi sintassi CSS.
nuiFormatColorMetodo(color, format?) => stringScrive un colore in un formato.
nuiToGamutMetodo(color, gamut?: 'srgb' | 'p3') => NuiColorRiporta un colore in sRGB o Display P3, come fa CSS.
nuiContrastMetodo(color, background) => numberIl rapporto di contrasto WCAG 2 di un colore su uno sfondo.