Needless UI

Komponenten

Farbwähler

Eine Farbe in OKLCH, mit Schiebereglern, Farbfeldern, Pipette und Kontrastprüfung.

Import

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

NuiColorPicker

Ein Farbwähler in OKLCH.

Selektor
nui-color-picker
NameTypStandardwertBeschreibung
valueTwo-Waystring''Die Farbe, im gewählten Format geschrieben. Leer, bis eine gewählt ist.
formatTwo-Way'hex' | 'rgb' | 'hsl' | 'oklch' | 'p3''hex'Wie der Wert geschrieben wird.
formatsInputNuiColorFormat[]hex, rgb, hsl, oklchDie Formate, die der Format-Button durchläuft.
gamutInput'srgb' | 'p3''srgb'Die Farben, die die Fläche enthält: sRGB oder Display P3.
alphaInputbooleantrueZeigt den Schieberegler für die Deckkraft.
swatchesInputNuiColorSwatch[][]Farben zur Auswahl, mit Namen.
contrastWithInputstringEin Hintergrund, gegen den der Kontrast geprüft wird.
eyeDropperInputbooleantrueZeigt die Pipette, wo der Browser eine hat.
disabledInputbooleanfalseLässt sich nicht ändern.
labelsInputPartial<NuiColorPickerLabels>Alle Texte, die der Farbwähler ansagt, zum Übersetzen.
colorEigenschaftSignal<NuiColor>Die gewählte Farbe, in OKLCH.

Helpers

Funktionen für Farben.

NameTypStandardwertBeschreibung
nuiParseColorMethode(text: string) => NuiColor | nullLiest eine Farbe in jeder CSS-Syntax.
nuiFormatColorMethode(color, format?) => stringSchreibt eine Farbe in einem Format.
nuiToGamutMethode(color, gamut?: 'srgb' | 'p3') => NuiColorBildet eine Farbe wie CSS in sRGB oder Display P3 ab.
nuiContrastMethode(color, background) => numberDas Kontrastverhältnis einer Farbe auf einem Hintergrund, nach WCAG 2.