색상 선택기 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 명도 대비.