Pantoia Design
Components

SwatchPicker

사용 예시

캘린더 색

Field로 감싸면 FieldLabel이 SwatchPicker 전체의 이름이 돼요.

이 캘린더의 일정이 고른 색으로 보여요.

tsx
<Field>  <FieldLabel>캘린더 색</FieldLabel>  <SwatchPicker value={color} onValueChange={setColor}>    {palette.map(c => <SwatchPickerItem key={c.hex} value={c.hex} label={c.name} />)}  </SwatchPicker>  <FieldHelp>이 캘린더의 일정이 고른 색으로 보여요.</FieldHelp></Field>

직접 고르기

목록에 없는 색도 허용할 때 SwatchPickerCustom을 끝에 둬요. 브라우저 색 입력을 열고, 목록에 없는 색을 고르면 그 색 항목이 직접 고르기 버튼 앞에 보여요.

tsx
<SwatchPicker value={color} onValueChange={setColor} aria-label="라벨 색">  {palette.map(c => <SwatchPickerItem key={c.hex} value={c.hex} label={c.name} />)}  <SwatchPickerCustom /></SwatchPicker>

체크 색

고른 색 항목의 체크 색은 그 색의 밝기를 보고 검정이나 흰색으로 정해요. 밝은 색에도 어두운 색에도 체크가 보여요.

tsx
<SwatchPicker defaultValue="#ffe629" aria-label="밝은 색">  <SwatchPickerItem value="#f0f0f3" label="흰색" />  <SwatchPickerItem value="#ffe629" label="레몬" /></SwatchPicker><SwatchPicker defaultValue="#1c2024" aria-label="어두운 색">  <SwatchPickerItem value="#8d8d86" label="회색" />  <SwatchPickerItem value="#1c2024" label="검정" /></SwatchPicker>

크기

좁은 메뉴나 Popover 안에서는 sm, 설정 화면에서는 md, 색이 중요한 화면에서는 lg를 써요.

tsx
<SwatchPicker size="sm" aria-label="색">…</SwatchPicker><SwatchPicker size="md" aria-label="색">…</SwatchPicker><SwatchPicker size="lg" aria-label="색">…</SwatchPicker>

비활성

권한이 없어 바꿀 수 없을 때 써요. 고른 색은 바깥 링으로 계속 보여요.

tsx
<SwatchPicker defaultValue="#3e63dd" disabled aria-label="색">  {palette.map(c => <SwatchPickerItem key={c.hex} value={c.hex} label={c.name} />)}  <SwatchPickerCustom disabled /></SwatchPicker>

컨트롤

값"#e5484d"
tsx
<SwatchPicker value={color} onValueChange={setColor} aria-label="색">  {palette.map(c => <SwatchPickerItem key={c.hex} value={c.hex} label={c.name} />)}  <SwatchPickerCustom /></SwatchPicker>

명세

이름
이름값기본
SwatchPicker
valuestring | null-
고른 색이에요. 고르지 않은 상태는 null이에요.
defaultValuestring | nullnull
처음에 고를 색을 정해요.
onValueChange(value: string) => void-
색을 고르면 호출돼요. 직접 고르기에서 고른 색도 같은 모양으로 넘어와서 eventDetails가 없어요.
sizesm, md, lgmd
24, 32, 40px이에요.
disabledbooleanfalse
aria-labelstring-
Field 밖에서 쓸 때 전체 이름을 정해요.
classNamestring-
SwatchPickerItem
valuestring-
CSS 색 문자열이에요. SwatchPicker의 바로 아래 자식이어야 목록으로 인식해요. 배열은 괜찮아요.
labelstring-
스크린 리더가 읽는 이름이고 Tooltip으로도 보여요.
disabledbooleanfalse
SwatchPickerCustom
labelstring직접 고르기
버튼의 이름이고 Tooltip으로도 보여요.
disabledbooleanfalse