Needless UI

Các component

Bộ chọn màu

Một màu trong OKLCH, với thanh trượt, mẫu màu, công cụ hút màu và kiểm tra độ tương phản.

Import

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

NuiColorPicker

Bộ chọn màu trong OKLCH.

Selector
nui-color-picker
TênKiểuMặc địnhMô tả
valueHai chiềustring''Màu, được ghi theo định dạng đã chọn. Trống cho đến khi chọn một màu.
formatHai chiều'hex' | 'rgb' | 'hsl' | 'oklch' | 'p3''hex'Cách ghi giá trị.
formatsInputNuiColorFormat[]hex, rgb, hsl, oklchCác định dạng mà nút định dạng lần lượt chuyển qua.
gamutInput'srgb' | 'p3''srgb'Các màu mà vùng màu chứa: sRGB, hoặc Display P3.
alphaInputbooleantrueHiển thị thanh trượt độ mờ đục.
swatchesInputNuiColorSwatch[][]Các màu để chọn, kèm tên.
contrastWithInputstringNền dùng để kiểm tra độ tương phản.
eyeDropperInputbooleantrueHiển thị công cụ hút màu, ở trình duyệt có hỗ trợ.
disabledInputbooleanfalseKhông thể thay đổi.
labelsInputPartial<NuiColorPickerLabels>Mọi văn bản mà bộ chọn đọc lên, để dịch.
colorThuộc tínhSignal<NuiColor>Màu đã chọn, trong OKLCH.

Helpers

Các hàm xử lý màu.

TênKiểuMặc địnhMô tả
nuiParseColorPhương thức(text: string) => NuiColor | nullĐọc một màu viết theo bất kỳ cú pháp CSS nào.
nuiFormatColorPhương thức(color, format?) => stringGhi một màu theo một định dạng.
nuiToGamutPhương thức(color, gamut?: 'srgb' | 'p3') => NuiColorĐưa một màu vào sRGB hoặc Display P3, như cách CSS làm.
nuiContrastPhương thức(color, background) => numberTỷ lệ tương phản WCAG 2 của một màu trên một nền.