ColorPicker

색상을 선택할 수 있는 컴포넌트입니다. 프리셋과 팔레트는 키보드 및 터치 입력을 지원합니다.

import { ColorPicker } from 'sud-ui';

사용할 때

색상을 선택할 때

사용예제

Basic Usage

기본적인 사용 방법입니다.

Custom Trigger

커스텀 트리거를 사용할 수 있습니다.

import React, { useState } from "react";
import { ColorPicker, Button, Card, Typography } from "sud-ui";

function hexToRgb(hex) {
  const cleanHex = hex.replace("#", "");
  const bigint = parseInt(cleanHex, 16);
  const r = (bigint >> 16) & 255;
  const g = (bigint >> 8) & 255;
  const b = bigint & 255;
  return { r, g, b };
}

export default function Example() {
  const [customTriggerOpen, setCustomTriggerOpen] = useState(false);
  const [customTriggerColor, setCustomTriggerColor] = useState("#1677FF");
  const [customTriggerAlpha, setCustomTriggerAlpha] = useState(100);

  return (
    <ColorPicker
      open={customTriggerOpen}
      setOpen={setCustomTriggerOpen}
      color={customTriggerColor}
      onChange={(color) => {
        setCustomTriggerColor(color.hex);
        setCustomTriggerAlpha(color.alpha);
      }}
    >
      <Button>
        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
          <Card
            background={"rgba(" + hexToRgb(customTriggerColor).r + ", " + hexToRgb(customTriggerColor).g + ", " + hexToRgb(customTriggerColor).b + ", " + (customTriggerAlpha / 100) + ")"}
            style={{ width: 32, height: 32 }}
          />
          <Typography>{customTriggerColor}</Typography>
        </div>
      </Button>
    </ColorPicker>
  );
}

Preset Mode

프리셋 색상 팔레트에서 색상을 선택합니다.

HEX |#1677FF

HSB |H:220 S:100 B:100

RGB |R:22 G:119 B:255

Opacity |1

Color Format

색상 포맷을 선택할 수 있습니다.

import React, { useState } from "react";
import { ColorPicker, Card, Typography } from "sud-ui";

export default function Example() {
  const [colorFormatOpen, setColorFormatOpen] = useState(false);
  const [hexColor, setHexColor] = useState("#1677FF");
  const [hsbColor, setHsbColor] = useState({ h: 220, s: 100, b: 100 });
  const [rgbColor, setRgbColor] = useState({ r: 22, g: 119, b: 255 });
  const [colorFormatAlpha, setColorFormatAlpha] = useState(100);

  return (
    <div className="flex gap-[10px]">
      <ColorPicker
        open={colorFormatOpen}
        setOpen={setColorFormatOpen}
        color={hexColor}
        onChange={(color) => {
          setHexColor(color.hex);
          setHsbColor(color.hsb);
          setRgbColor(color.rgb);
          setColorFormatAlpha(color.alpha);
        }}
      />
      <Card>
        <div className="flex gap-[10px]">
          <Typography pretendard="SB">HEX |</Typography>
          <Typography>{hexColor}</Typography>
        </div>
        <div className="flex gap-[10px]">
          <Typography pretendard="SB">HSB |</Typography>
          <Typography>
            H:{hsbColor.h} S:{hsbColor.s} B:{hsbColor.b}
          </Typography>
        </div>
        <div className="flex gap-[10px]">
          <Typography pretendard="SB">RGB |</Typography>
          <Typography>
            R:{rgbColor.r} G:{rgbColor.g} B:{rgbColor.b}
          </Typography>
        </div>
        <div className="flex gap-[10px]">
          <Typography pretendard="SB">Opacity |</Typography>
          <Typography>{colorFormatAlpha / 100}</Typography>
        </div>
      </Card>
    </div>
  );
}

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

color

선택된 색상 값

string

#1677FF

onChange

색상이 변경될 때 호출되는 함수 (color: ColorPickerColor) => void

(color: ColorPickerColor) => void

-

open

컬러피커의 열림 상태

boolean

false

setOpen

컬러피커의 열림 상태를 변경하는 함수 (open: boolean) => void

(open: boolean) => void

() => {}

children

컬러피커의 커스텀 트리거 요소

ReactNode

-

trigger

컬러피커를 여는 트리거 방식

click

|

hover

|

contextMenu

click

placement

컬러피커의 위치

top

|

bottom

|

left

|

right

bottom

size

컬러피커의 크기

sm

|

md

|

lg

sm

style

추가 스타일

CSSProperties

{ padding: 5 }

className

추가 클래스명

string

""

mode

컬러피커 모드 (그라디언트 / 프리셋)

gradient

|

preset

gradient

popConfirmProps

PopConfirm 컴포넌트에 전달되는 props

object

{}

selectProps

Select 컴포넌트에 전달되는 props

object

{}

inputProps

Input 컴포넌트에 전달되는 props

object

{}

sliderProps

Slider 컴포넌트에 전달되는 props

object

{}

cardProps

Card 컴포넌트에 전달되는 props

object

{}

buttonProps

Button 컴포넌트에 전달되는 props

object

{}

rest

추가 HTML 속성

HTMLAttributes

-

Soon UI Design

ColorPicker

사용할 때

사용예제

사용 방법

개인정보 처리방침

서비스 약관