顏色選擇器 API · Needless UI

匯入

import-color-picker.ts

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

以 OKLCH 運作的顏色選擇器。

NuiColorPicker: 屬性
名稱	型別	預設值	說明
`value`雙向繫結	`string`	`''`	依格式寫出的顏色；選取顏色前為空。
`format`雙向繫結	`'hex' \| 'rgb' \| 'hsl' \| 'oklch' \| 'p3'`	`'hex'`	值的寫法。
`formats`輸入	`NuiColorFormat[]`	`hex, rgb, hsl, oklch`	格式按鈕依序切換的格式。
`gamut`輸入	`'srgb' \| 'p3'`	`'srgb'`	選色區域包含的顏色：sRGB 或 Display P3。
`alpha`輸入	`boolean`	`true`	顯示不透明度滑桿。
`swatches`輸入	`NuiColorSwatch[]`	`[]`	可供選取的顏色，可附名稱。
`contrastWith`輸入	`string`		用來檢查對比度的背景色。
`eyeDropper`輸入	`boolean`	`true`	瀏覽器支援時顯示滴管。
`disabled`輸入	`boolean`	`false`	禁止變更。
`labels`輸入	`Partial<NuiColorPickerLabels>`		它顯示或朗讀的所有文字，供翻譯使用。
`color`屬性	`Signal<NuiColor>`		選取的顏色，以 OKLCH 表示。

處理顏色的函式。

Helpers: 屬性
名稱	型別	說明
`nuiParseColor`方法	`(text: string) => NuiColor \| null`	讀取以任何 CSS 語法寫成的顏色。
`nuiFormatColor`方法	`(color, format?) => string`	以指定格式寫出顏色。
`nuiToGamut`方法	`(color, gamut?: 'srgb' \| 'p3') => NuiColor`	像 CSS 一樣，把顏色對應到 sRGB 或 Display P3 色域內。
`nuiContrast`方法	`(color, background) => number`	顏色在背景上的 WCAG 2 對比度。