API ของตัวเลือกสี

Import

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`Input	`NuiColorFormat[]`	`hex, rgb, hsl, oklch`	รูปแบบที่ปุ่มรูปแบบจะวนผ่าน
`gamut`Input	`'srgb' \| 'p3'`	`'srgb'`	สีที่พื้นที่สีครอบคลุม: sRGB หรือ Display P3
`alpha`Input	`boolean`	`true`	แสดงสไลเดอร์ความทึบแสง
`swatches`Input	`NuiColorSwatch[]`	`[]`	สีให้เลือก พร้อมชื่อ
`contrastWith`Input	`string`		พื้นหลังที่ใช้ตรวจคอนทราสต์
`eyeDropper`Input	`boolean`	`true`	แสดงที่ดูดสี หากเบราว์เซอร์มี
`disabled`Input	`boolean`	`false`	เปลี่ยนค่าไม่ได้
`labels`Input	`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 ของสีบนพื้นหลัง