Импорт
import { NuiColorPicker, nuiParseColor } from '@needless-ui/angular/color-picker';NuiColorPicker
Выбор цвета в OKLCH.
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
valueДвусторонний | string | '' | Цвет, записанный в выбранном формате. Пусто, пока цвет не выбран. |
formatДвусторонний | 'hex' | 'rgb' | 'hsl' | 'oklch' | 'p3' | 'hex' | Формат записи значения. |
formatsInput | NuiColorFormat[] | hex, rgb, hsl, oklch | Форматы, которые по очереди перебирает кнопка формата. |
gamutInput | 'srgb' | 'p3' | 'srgb' | Цвета, которые вмещает область: sRGB или Display P3. |
alphaInput | boolean | true | Показывает ползунок непрозрачности. |
swatchesInput | NuiColorSwatch[] | [] | Цвета для выбора, с названиями. |
contrastWithInput | string | Фон, с которым проверяется контраст. | |
eyeDropperInput | boolean | true | Показывает пипетку, если она есть в браузере. |
disabledInput | boolean | false | Цвет нельзя изменить. |
labelsInput | Partial<NuiColorPickerLabels> | Все озвучиваемые компонентом тексты — для перевода. | |
colorСвойство | Signal<NuiColor> | Выбранный цвет в OKLCH. |
Helpers
Функции для работы с цветом.
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
nuiParseColorМетод | (text: string) => NuiColor | null | Разбирает цвет в любом синтаксисе CSS. | |
nuiFormatColorМетод | (color, format?) => string | Записывает цвет в заданном формате. | |
nuiToGamutМетод | (color, gamut?: 'srgb' | 'p3') => NuiColor | Приводит цвет к охвату sRGB или Display P3 так же, как CSS. | |
nuiContrastМетод | (color, background) => number | Коэффициент контраста цвета на фоне по WCAG 2. |