カラーピッカーの API

インポート

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 のコントラスト比。