ColorRow
과목 팔레트 8색을 동그란 점으로 늘어놓고 하나를 고르는 컴포넌트다. 카테고리와 캘린더의 색을 정할 때 쓴다.
- 분류
- Calendar 앱
- 가져오기
import { ColorRow } from '@/cal/sheets'- 코드 위치
apps/calendar/src/cal/sheets.tsx:301
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
언제 쓰는가#
쓴다
- 이 컴포넌트는 Mordy Calendar 앱(
apps/calendar/src/cal)에만 있다. - 카테고리나 캘린더의 색을 고르게 할 때 쓴다.
쓰지 않는다
- 팔레트에 없는 색을 고르게 하지 않는다. 8색(
blue,green,orange,red,purple,teal,yellow,gray)만 쓴다.
종류#
종류가 없다.
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 기본 | 점 둘레 고리 36, 점 22 |
상태#
| 상태 | 모습과 동작 |
|---|---|
| 선택됨 | 점 둘레에 그 색의 고리가 생긴다. |
사용 방법#
기본
기본
import { ColorRow } from '@/cal/sheets';
<ColorRow value={draft.color} onChange={(k) => setDraft({ ...draft, color: k })} />속성(props)#
| 이름 | 타입 | 기본값 | 필수 | 설명 |
|---|---|---|---|---|
value | string | — | 필수 | 선택된 색 이름. |
onChange | (k: ColorKey) => void | — | 필수 | 색을 눌렀을 때 새 색 이름과 함께 호출된다. |
치수와 토큰#
- 점
- 색은 과목 팔레트의
glyph - 고리
- 선택된 점 둘레에 2px 같은 색
접근성#
- 역할은
radiogroup, 각 점은radio이고 이름은 색 이름("blue")이다. 한국어 이름이 없어서 화면 읽기 프로그램은 영어로 읽는다. - 선택은 고리로 나타낸다.
잘한 예와 잘못한 예#
함께 보는 컴포넌트#
- SubjectMark · CategoryDot · GroupAvatar: 일정 줄과 칩에 붙는 작은 표식 세 가지다. 과목 아이콘(
SubjectMark), 분류 색 점(CategoryDot), 그룹 캘린더의 동그란 그림(GroupAvatar). - SubjectIcon: 과목을 나타내는 둥근 아이콘 타일이다. 과목마다 기호(Σ, Aa, 책, 건물, 잎, 지구, …)와 색이 정해져 있다.