Color Picker
Color Picker
색상 영역(color area) 또는 정의된 스와치 세트에서 색상을 선택할 때 사용하는 컴포넌트예요. 다양한 채널 슬라이더와 스와치를 조합해 강력한 색상 선택 UI를 만들 수 있어요.
출처: 문서
본문
사용법 (Usage)
import { ColorPicker } from "@chakra-ui/react"
<ColorPicker.Root>
<ColorPicker.HiddenInput />
<ColorPicker.Label />
<ColorPicker.Control>
<ColorPicker.Input />
<ColorPicker.Trigger />
</ColorPicker.Control>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.Area />
<ColorPicker.EyeDropper />
<ColorPicker.Sliders />
<ColorPicker.SwatchGroup>
<ColorPicker.SwatchTrigger>
<ColorPicker.Swatch />
</ColorPicker.SwatchTrigger>
</ColorPicker.SwatchGroup>
</ColorPicker.Content>
</ColorPicker.Positioner>
</ColorPicker.Root>
숏컷 (Shortcuts)
ColorPicker.ChannelSlider
이 컴포넌트는 슬라이더 트랙, 썸, 투명도 그리드를 렌더링해요.
<ColorPicker.ChannelSlider />
다음과 같아요:
<ColorPicker.ChannelSlider>
<ColorPickerTransparencyGrid />
<ColorPickerChannelSliderTrack />
<ColorPickerChannelSliderThumb />
</ColorPicker.ChannelSlider>
ColorPicker.Sliders
이것은 hue와 alpha 슬라이더를 위한 숏컷 컴포넌트예요:
<Stack>
<ColorPickerChannelSlider channel="hue" />
<ColorPickerChannelSlider channel="alpha" />
</Stack>
ColorPicker.Area
이 컴포넌트는 색상 영역의 썸과 배경을 렌더링해요.
<ColorPicker.Area>
<ColorPicker.AreaThumb />
<ColorPicker.AreaBackground />
</ColorPicker.Area>
다음과 같아요:
<ColorPicker.Area />
ColorPicker.EyeDropper
이것은 다음을 위한 숏컷 컴포넌트예요:
<ColorPicker.EyeDropperTrigger asChild>
<IconButton>
<LuPipette />
</IconButton>
</ColorPicker.EyeDropperTrigger>
예시 (Examples)
크기 (Sizes)
size prop을 사용하면 컬러 피커의 크기를 바꿀 수 있어요.
변형 (Variants)
variant prop을 사용하면 컬러 피커의 시각적 스타일을 바꿀 수 있어요. 값은 outline 또는 subtle이 될 수 있어요.
입력 전용 (Input Only)
InputGroup에 ColorPicker.ValueSwatch와 ColorPicker.EyeDropper를 조합하면 입력 필드만 포함하는 컬러 피커를 렌더링할 수 있어요.
스와치 전용 (Swatch Only)
ColorPicker.SwatchGroup과 ColorPicker.SwatchTrigger를 사용하면 컬러 스와치만 렌더링할 수 있어요.
트리거 전용 (Trigger Only)
ColorPicker.ValueSwatch와 ColorPicker.ValueText를 사용해 처음에 트리거만 보여주도록 컬러 피커를 구성할 수 있어요.
입력 안의 트리거 (Trigger Inside Input)
InputGroup과 ColorPickerInput을 사용해 입력 필드 안에서 트리거가 되는 컬러 피커를 구성할 수 있어요.
제어 (Controlled)
value와 onValueChange prop을 사용하면 컬러 피커의 상태를 제어할 수 있어요.
스토어 (Store)
컬러 피커를 제어하는 또 다른 방법은 RootProvider 컴포넌트와 useColorPicker 스토어 훅을 사용하는 거예요.
이렇게 하면 컬러 피커 밖에서도 컬러 피커의 상태와 메서드에 접근할 수 있어요.
변경 종료 (Change End)
onValueChangeEnd를 사용하면 사용자가 색상을 스크러빙하거나 드래그하는 중이 아니라, 색상 선택을 끝냈을 때를 감지할 수 있어요.
채널 슬라이더 (Channel Slider)
ColorPickerChannelSliders와 format prop을 조합하면 컬러 피커에 다양한 색상 채널을 추가할 수 있어요.
Hook Form
react-hook-form과 컬러 피커를 통합하는 예시예요.
인라인 (Inline)
컬러 피커를 인라인 버전으로 표시하는 예시예요.
다이얼로그에서 열기 (Open From Dialog)
다이얼로그 안에서 컬러 피커를 사용하려면 ColorPicker.Positioner를 문서의 body로 포털링하는 것을 피해 주세요.
비활성화 (Disabled)
disabled prop을 전달하면 컬러 피커를 비활성화할 수 있어요.
채널 입력 (Channel Input)
ChannelFormat.Select와 ColorPicker.ChannelInput을 사용하면 사용자가 선호하는 채널을 선택할 수 있는 컬러 피커를 만들 수 있어요.
콘텐츠 맞춤 (Fit Content)
ColorPicker.Trigger에 data-fit-content 속성을 전달하면 콘텐츠 크기에 맞게 만들 수 있어요.
읽기 전용 (ReadOnly)
readOnly prop을 사용하면 컬러 피커 컴포넌트를 읽기 전용으로 만들 수 있어요.
스와치 저장 (Save Swatch)
선택한 색상을 스와치로 저장하는 예시예요.
스와치 (Swatches)
컬러 피커를 미리 정의된 스와치와 조합하는 예시예요.
스와치와 입력 (Swatch and Input)
스와치를 입력 필드와 구성하는 방법이에요.
스와치와 트리거 (Swatch and Trigger)
스와치를 트리거와 구성하는 방법이에요.
가이드 (Guide)
Hex 코드 얻기
onValueChange 콜백을 사용해 색상 값을 얻을 수 있어요. value 객체는 다양한 형식 옵션을 받는 toString() 메서드를 갖고 있어요.
<ColorPicker.Root
onValueChange={(details) => {
console.log(details.value.toString("hex")) // "#ff0000"
console.log(details.value.toString("hexa")) // "#ff0000ff" (with alpha)
console.log(details.value.toString("rgb")) // "rgb(255, 0, 0)"
console.log(details.value.toString("css")) // CSS color string
}}
>
{/* ... */}
</ColorPicker.Root>
스토어에서도 접근할 수 있어요:
const picker = useColorPicker() // or useColorPickerContext()
const hexValue = picker.value.toString("hex") // "#ff0000"
같은 toString() 메서드는 parseColor를 사용할 때도 사용할 수 있어요:
import { parseColor } from "@chakra-ui/react"
const color = parseColor("#ff0000")
console.log(color.toString("hex")) // "#ff0000"
console.log(color.toString("rgba")) // "rgba(255, 0, 0, 1)"
Props
Root
ColorPicker 컴포넌트의 Root 부분에 전달할 수 있는 prop을 확인해 주세요.
Explorer
Color Picker 컴포넌트의 각 부분을 인터랙티브하게 탐색해 보세요. 사이드바에서 부분을 클릭하면 미리보기에서 강조 표시돼요.
더 알아보기 (Learn more)
Chakra UI의 Color Picker 컴포넌트에 대해 더 자세히 알아보려면 공식 문서와 Ark UI Color Picker 문서를 확인해 보세요.