Needless UI

Komponen

Pemilih warna

Warna dalam OKLCH, dengan slider, contoh warna, pipet warna, dan pemeriksaan kontras.

Impor

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

NuiColorPicker

Pemilih warna dalam OKLCH.

Selektor
nui-color-picker
NamaTipeDefaultDeskripsi
valueDua arahstring''Warnanya, ditulis dalam format yang dipilih. Kosong sampai ada warna yang dipilih.
formatDua arah'hex' | 'rgb' | 'hsl' | 'oklch' | 'p3''hex'Cara nilai ditulis.
formatsInputNuiColorFormat[]hex, rgb, hsl, oklchFormat yang dilalui tombol format secara bergiliran.
gamutInput'srgb' | 'p3''srgb'Warna yang dimuat area: sRGB, atau Display P3.
alphaInputbooleantrueMenampilkan slider opasitas.
swatchesInputNuiColorSwatch[][]Warna yang bisa dipilih, beserta namanya.
contrastWithInputstringLatar belakang untuk memeriksa kontras.
eyeDropperInputbooleantrueMenampilkan pipet warna, jika browser menyediakannya.
disabledInputbooleanfalseTidak bisa diubah.
labelsInputPartial<NuiColorPickerLabels>Semua teks yang disampaikan pemilih, untuk diterjemahkan.
colorPropertiSignal<NuiColor>Warna yang dipilih, dalam OKLCH.

Helpers

Fungsi untuk warna.

NamaTipeDefaultDeskripsi
nuiParseColorMetode(text: string) => NuiColor | nullMembaca warna dalam sintaks CSS apa pun.
nuiFormatColorMetode(color, format?) => stringMenulis warna dalam suatu format.
nuiToGamutMetode(color, gamut?: 'srgb' | 'p3') => NuiColorMembawa warna ke dalam sRGB atau Display P3, seperti yang dilakukan CSS.
nuiContrastMetode(color, background) => numberRasio kontras WCAG 2 dari warna di atas latar belakang.