ColorPicker

ColorPicker (색상 선택기)

ColorPicker 컴포넌트는 hex(a), rgb(a), hsl(a), hsv(a) 포맷으로 색상을 선택하는 컴포넌트예요. 채도, 색조, 알파 슬라이더를 제공해요.

출처: 문서

본문

ColorPicker를 사용하면 다양한 포맷으로 색상을 선택할 수 있어요.

import { useState } from 'react';
import { ColorPicker, Text } from '@mantine/core';

function Demo() {
  const [value, onChange] = useState('rgba(47, 119, 150, 0.7)');

  return (
    <>
      <ColorPicker format="rgba" value={value} onChange={onChange} />
      <Text>{value}</Text>
    </>
  );
}

제어 사용 (Controlled)

ColorPicker 값은 반드시 문자열이어야 해요. 다른 타입은 지원되지 않아요. onChange 함수는 단일 인자로 문자열 값을 받아 호출돼요.

import { useState } from 'react';
import { ColorPicker } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState('#ffffff');
  return <ColorPicker value={value} onChange={setValue} />;
}

비제어 사용 (Uncontrolled)

ColorPicker는 네이티브 input 요소처럼 비제어 폼에서도 사용할 수 있어요. 폼 제출 시 FormData 객체에 색상 선택기 값을 포함하려면 name 속성을 설정해요. 비제어 폼에서 초기 값을 제어하려면 defaultValue prop을 사용해요.

FormData와 함께 비제어 ColorPicker를 사용하는 예시:

import { ColorPicker } from '@mantine/core';

function Demo() {
  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        const formData = new FormData(event.currentTarget);
        console.log('Color value:', formData.get('color'));
      }}
    >
      <ColorPicker
        name="color"
        defaultValue="#FF0000"
        format="hex"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

색상 포맷 (Color format)

ColorPicker는 hex, hexa, rgb, rgba, hsl, hsla 색상 포맷을 지원해요. 불투명도를 바꾸는 슬라이더와 색상 미리보기는 hexa, rgba, hsla 포맷에서만 표시돼요.

import { ColorPicker } from '@mantine/core';

function Demo() {
  return <ColorPicker />;
}

스와치 (With swatches)

swatches prop으로 사전 정의된 색상 스와치를 추가할 수 있어요.

import { ColorPicker } from '@mantine/core';

function Demo() {
  return (
    <ColorPicker
      format="hex"
      swatches={['#2e2e2e', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
    />
  );
}

기본적으로 ColorPicker는 한 행에 7개의 스와치를 표시해요. swatchesPerRow prop으로 설정할 수 있어요.

피커 없이 스와치만 표시하려면 withPicker={false}와 fullWidth prop을 설정해요.

import { useState } from 'react';
import { DEFAULT_THEME, ColorPicker, Text } from '@mantine/core';

function Demo() {
  const [value, onChange] = useState('#fff');

  return (
    <>
      <ColorPicker
        format="hex"
        value={value}
        onChange={onChange}
        withPicker={false}
        fullWidth
        swatches={[
          ...DEFAULT_THEME.colors.red.slice(0, 7),
          ...DEFAULT_THEME.colors.green.slice(0, 7),
          ...DEFAULT_THEME.colors.blue.slice(0, 7),
        ]}
      />

      <Text>{value}</Text>
    </>
  );
}

크기 (Size)

ColorPicker는 xs, sm, md, lg, xl의 5가지 사전 정의된 크기가 있어요.

import { ColorPicker } from '@mantine/core';

function Demo() {
  return <ColorPicker />;
}

fullWidth

fullWidth prop을 설정하면 컴포넌트가 부모 너비의 100%로 늘어나요. 이 경우 피커는 고정 너비를 가지지 않지만, size prop으로 여전히 슬라이더 크기를 제어할 수 있어요.

import { ColorPicker } from '@mantine/core';

function Demo() {
  return <ColorPicker fullWidth size="lg" format="rgba" />;
}

Styles API

ColorPicker는 Styles API를 지원해요. classNames prop으로 내부 요소에 스타일을 추가할 수 있어요.

주요 선택자는 다음과 같아요.

  • wrapper – 루트 요소
  • preview – format이 alpha 채널을 지원할 때만 표시되는 색상 미리보기
  • body – alpha/hue 슬라이더와 색상 미리보기 포함
  • slider – alpha·hue 슬라이더 루트
  • sliderOverlay – hue·alpha 슬라이더 위에 다양한 오버레이를 표시하는 요소
  • saturation – 채도 선택기
  • saturationOverlay – 채도 선택기 위에 다양한 오버레이를 표시하는 요소
  • sliders – alpha·hue 슬라이더 포함
  • thumb – 모든 슬라이더의 썸
  • swatch – 색상 스와치
  • swatches – 색상 스와치 목록

접근성 (Accessibility)

ColorPicker 컴포넌트는 기본적으로 접근 가능해요.

  • 채도, 색조, 알파 슬라이더는 포커스 가능해요
  • 마우스로 슬라이더와 상호작용하면 포커스가 슬라이더로 이동해요
  • 모든 값은 화살표 키로 변경할 수 있어요

스크린 리더를 위해 접근 가능하게 만들려면 saturationLabel, hueLabel, alphaLabel을 설정해요.

import { ColorPicker } from '@mantine/core';

function Demo() {
  return (
    <ColorPicker
      saturationLabel="Saturation"
      hueLabel="Hue"
      alphaLabel="Alpha"
    />
  );
}

더 알아보기 (Learn more)