Color Picker

기본 입력, 텍스트, 채널, 색상 영역으로 정확한 색을 편집합니다.

용법

브라우저 기본 색상 선택기

브라우저 기본 색상 입력과 텍스트 입력이 같은 정확한 색상값을 사용합니다.

Accent color

Hue

HEX

System

#5b6df6

<!-- Color Picker / Native -->
<script setup lang="ts">
import { ColorPickerAlphaSlider, ColorPickerArea, ColorPickerAreaThumb, ColorPickerFormatTrigger, ColorPickerHueSlider, ColorPickerRoot } from '@sectile/vue/color-picker'
</script>
<template>
  <ColorPickerRoot v-slot="color" default-value="#5b6df680" allow-alpha name="accent">
    <ColorPickerArea><ColorPickerAreaThumb /></ColorPickerArea>
    <ColorPickerHueSlider /><ColorPickerAlphaSlider />
    <ColorPickerFormatTrigger format="hsv">HSV</ColorPickerFormatTrigger>
    <output>{{ color.text }}</output>
  </ColorPickerRoot>
</template>

투명도

화면에 보이는 색상 채널과 투명도를 함께 조절합니다.

Accent color

Hue

Alpha

HEX

System

#26c6a080

<!-- Color Picker / Alpha -->
<script setup lang="ts">
import { ColorPickerAlphaSlider, ColorPickerArea, ColorPickerAreaThumb, ColorPickerFormatTrigger, ColorPickerHueSlider, ColorPickerRoot } from '@sectile/vue/color-picker'
</script>
<template>
  <ColorPickerRoot v-slot="color" default-value="#5b6df680" allow-alpha name="accent">
    <ColorPickerArea><ColorPickerAreaThumb /></ColorPickerArea>
    <ColorPickerHueSlider /><ColorPickerAlphaSlider />
    <ColorPickerFormatTrigger format="hsv">HSV</ColorPickerFormatTrigger>
    <output>{{ color.text }}</output>
  </ColorPickerRoot>
</template>

외부 상태 관리

현재 값은 부모가 관리하고, 허용된 변경을 컴포넌트에 다시 전달합니다.

Accent color

Hue

HEX

System

#5b6df6

<!-- Color Picker / Controlled -->
<script setup lang="ts">
import { ColorPickerAlphaSlider, ColorPickerArea, ColorPickerAreaThumb, ColorPickerFormatTrigger, ColorPickerHueSlider, ColorPickerRoot } from '@sectile/vue/color-picker'
</script>
<template>
  <ColorPickerRoot v-slot="color" default-value="#5b6df680" allow-alpha name="accent">
    <ColorPickerArea><ColorPickerAreaThumb /></ColorPickerArea>
    <ColorPickerHueSlider /><ColorPickerAlphaSlider />
    <ColorPickerFormatTrigger format="hsv">HSV</ColorPickerFormatTrigger>
    <output>{{ color.text }}</output>
  </ColorPickerRoot>
</template>

API

Vue 패키지: @sectile/vue/color-picker

컴포넌트

ColorPickerRoot
ColorPickerLabel
ColorPickerControl
ColorPickerNativeInput
ColorPickerTextInput
ColorPickerChannelInput
ColorPickerCoordinateInput
ColorPickerCoordinateSlider
ColorPickerArea
ColorPickerAreaThumb
ColorPickerHueSlider
ColorPickerAlphaSlider
ColorPickerSwatch
ColorPickerValueText
ColorPickerFormatTrigger

Props

`ColorPickerRootProps`

allowAlpha: 타입boolean기본값true
색상값에 투명도를 포함할 수 있는지 여부입니다.
alphaStep: 타입number기본값17
투명도 채널을 바꿀 때 적용할 증감 간격입니다.
as: 타입PrimitiveAs기본값'div'
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
channelStep: 타입number기본값1
색상 채널을 바꿀 때 적용할 증감 간격입니다.
defaultDraft: 타입string | null기본값null
컴포넌트가 관리하는 편집 초깃값입니다.
defaultFormat: 타입ColorFormat기본값'hex'
컴포넌트가 관리하는 초기 색상 형식입니다.
defaultValue: 타입string기본값'#5b6df6'
컴포넌트가 값을 관리할 때 사용할 초깃값입니다.
disabled: 타입boolean기본값false
사용자 조작을 막을지 여부입니다.
draft: 타입string | null기본값undefined
확정 전 편집 중인 외부 제어 문자열입니다.
form: 타입string기본값undefined
컨트롤을 연결할 네이티브 form 요소의 ID입니다.
format: 타입ColorFormat기본값undefined
외부에서 제어하는 색상 형식입니다.
label: 타입string기본값undefined
보조 기술이 읽는 컨트롤 이름입니다.
modelValue: 타입string기본값undefined
부모가 상태를 관리할 때 사용할 현재 값입니다.
name: 타입string기본값undefined
네이티브 폼 제출에 사용할 이름입니다.
readonly: 타입boolean기본값false
값 확인만 허용하는 읽기 전용 상태 여부입니다.
required: 타입boolean기본값false
제출 전에 올바른 값이 반드시 있어야 하는지 여부입니다.

`ColorPickerPartProps`

as: 타입PrimitiveAs기본값파트별로 다름
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.

`ColorPickerChannelInputProps`

as: 타입PrimitiveAs기본값'input'
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
channel: 타입ColorChannel기본값필수
이 입력이 편집할 색상 채널입니다.

`ColorPickerFormatTriggerProps`

as: 타입PrimitiveAs기본값'button'
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
format: 타입ColorFormat기본값필수
외부에서 제어하는 색상 형식입니다.

`ColorPickerCoordinateInputProps`

as: 타입PrimitiveAs기본값undefined
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값undefined
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
coordinate: 타입ColorCoordinate기본값필수
선택한 색상 모델에서 편집할 좌표입니다.
format: 타입ColorModel기본값필수
외부에서 제어하는 색상 형식입니다.

`ColorPickerCoordinateSliderProps`

as: 타입PrimitiveAs기본값undefined
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값undefined
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
coordinate: 타입ColorCoordinate기본값필수
선택한 색상 모델에서 편집할 좌표입니다.
format: 타입ColorModel기본값필수
외부에서 제어하는 색상 형식입니다.

슬롯

`ColorPickerRootSlotProps`

area: 타입ColorAreaValue
현재 2차원 색상 영역 상태입니다.
channel: 타입ColorChannel
현재 색상 채널입니다.
coordinates: 타입readonly ColorCoordinateValue[]
현재 색상 모델의 좌표입니다.
cssColor: 타입string
CSS 문자열로 직렬화한 현재 색상입니다.
disabled: 타입boolean
사용자 조작을 막을지 여부입니다.
draft: 타입string | null
현재 편집 중인 입력 문자열입니다.
format: 타입ColorFormat
현재 색상 형식입니다.
readonly: 타입boolean
값 확인만 허용하는 읽기 전용 상태 여부입니다.
text: 타입string
현재 값을 표시한 문자열입니다.
value: 타입ColorValue
이 계약이 노출하는 현재 값입니다.

이벤트

`ColorPickerRoot`

update:draft: 페이로드string | null
편집 중인 입력 문자열이 바뀔 때 발생합니다.
update:format: 페이로드ColorFormat
새 색상 형식을 요청할 때 발생합니다.
update:modelValue: 페이로드string
컴포넌트가 외부 제어 값의 변경을 요청할 때 발생합니다.

기타 타입

`ColorPickerValueChangeHandler`

type ColorPickerValueChangeHandler = (value: string) => void

`ColorPickerDraftChangeHandler`

type ColorPickerDraftChangeHandler = (value: string | null) => void

`ColorPickerFormatChangeHandler`

type ColorPickerFormatChangeHandler = (value: ColorFormat) => void

`ColorAreaValue`

이름	타입	필수
`x`	`number`	필수
`y`	`number`	필수
`hue`	`number`	필수
`alpha`	`number`	필수

`ColorChannel`

type ColorChannel = 'red' | 'green' | 'blue' | 'alpha'

`ColorCoordinate`

type ColorCoordinate = ColorChannel | 'hue' | 'saturation' | 'lightness' | 'value' | 'cyan' | 'magenta' | 'yellow' | 'black' | 'chroma'

`ColorCoordinateValue`

이름	타입	필수
`coordinate`	`ColorCoordinate`	필수
`label`	`string`	필수
`value`	`number`	필수
`min`	`number`	필수
`max`	`number`	필수
`step`	`number`	필수
`unit`	`'' \| '%' \| '°'`	필수

`ColorFormat`

type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'hsv' | 'cmyk' | 'oklch'

`ColorModel`

type ColorModel = Exclude<ColorFormat, 'hex'>

`ColorPickerPolicies`

이름	타입	필수
`allowAlpha`	`boolean`	—
`channelStep`	`number`	—
`alphaStep`	`number`	—

`ColorValue`

type ColorValue = Rgba8

파트

공통 범위: [data-scope="color-picker"]. 컴포넌트 내부로 스타일을 제한할 때 파트 선택자와 함께 사용합니다.

파트	선택자	역할	추가 속성
`root`	`[data-part="root"]`	컴포넌트 경계와 내부 파트를 묶습니다.	—
`label`	`[data-part="label"]`	컴포넌트 조작부의 레이블입니다.	—
`control`	`[data-part="control"]`	주요 조작부를 묶습니다.	—
`native-input`	`[data-part="native-input"]`	폼 제출과 플랫폼 동작을 위한 네이티브 입력을 유지합니다.	—
`text-input`	`[data-part="text-input"]`	서식화된 텍스트 값 입력을 받습니다.	—
`channel-input`	`[data-part="channel-input"]`	색상 채널 하나를 숫자로 편집합니다.	—
`coordinate-input`	`[data-part="coordinate-input"]`	현재 값의 좌표 하나를 편집합니다.	—
`coordinate-slider`	`[data-part="coordinate-slider"]`	한 좌표를 제한된 범위에서 조절합니다.	—
`area`	`[data-part="area"]`	2차원 조작 영역을 제공합니다.	—
`area-thumb`	`[data-part="area-thumb"]`	2차원 영역의 선택 지점을 표시하고 조절합니다.	—
`hue-slider`	`[data-part="hue-slider"]`	색상 색조를 조절합니다.	—
`alpha-slider`	`[data-part="alpha-slider"]`	색상 불투명도를 조절합니다.	—
`swatch`	`[data-part="swatch"]`	선택한 색상을 미리 보여줍니다.	—
`value-text`	`[data-part="value-text"]`	서식화된 값을 텍스트로 표시합니다.	—
`format-trigger`	`[data-part="format-trigger"]`	현재 값의 표시 형식을 바꿉니다.	—

키보드 동작

키	동작
`Arrow keys`	현재 색상 좌표나 슬라이더 값을 조절합니다.
`Enter`	입력한 색상 값을 확정합니다.
`Escape`	입력을 취소하고 확정된 색상을 복원합니다.

접근성

텍스트 입력과 슬라이더가 이름, 범위, 현재 값, 색상 채널 역할을 함께 노출합니다.

Color Picker ​

용법 ​

브라우저 기본 색상 선택기 ​

투명도 ​

외부 상태 관리 ​

API ​

Props ​

ColorPickerRootProps ​

ColorPickerPartProps ​

ColorPickerChannelInputProps ​

ColorPickerFormatTriggerProps ​

ColorPickerCoordinateInputProps ​

ColorPickerCoordinateSliderProps ​

슬롯 ​

ColorPickerRootSlotProps ​

이벤트 ​

ColorPickerRoot ​

기타 타입 ​

ColorPickerValueChangeHandler ​

ColorPickerDraftChangeHandler ​

ColorPickerFormatChangeHandler ​

ColorAreaValue ​

ColorChannel ​

ColorCoordinate ​

ColorCoordinateValue ​

ColorFormat ​

ColorModel ​

ColorPickerPolicies ​

ColorValue ​

파트 ​

키보드 동작 ​

접근성 ​

Color Picker

용법

브라우저 기본 색상 선택기

투명도

외부 상태 관리

API

Props

`ColorPickerRootProps`

`ColorPickerPartProps`

`ColorPickerChannelInputProps`

`ColorPickerFormatTriggerProps`

`ColorPickerCoordinateInputProps`

`ColorPickerCoordinateSliderProps`

슬롯

`ColorPickerRootSlotProps`

이벤트

`ColorPickerRoot`

기타 타입

`ColorPickerValueChangeHandler`

`ColorPickerDraftChangeHandler`

`ColorPickerFormatChangeHandler`

`ColorAreaValue`

`ColorChannel`

`ColorCoordinate`

`ColorCoordinateValue`

`ColorFormat`

`ColorModel`

`ColorPickerPolicies`

`ColorValue`

파트

키보드 동작

접근성