颜色选择器 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 对比度。