PageDots
지금이 몇 번째 단계인지 알려 주는 작은 점 줄이다. 온보딩 단계 표시에 쓴다.
- 분류
- 탐색
- 가져오기
import { PageDots } from '@/ui/controls'- 코드 위치
apps/mobile/src/ui/controls.tsx:96
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
언제 쓰는가#
쓴다
- 3~6단계로 나뉜 온보딩이나 안내에서 지금 위치를 알릴 때 쓴다.
쓰지 않는다
- 눌러서 이동하는 컨트롤로 쓰지 않는다. 눌리지 않는다.
- 7단계가 넘는 흐름에 쓰지 않는다.
종류#
종류가 없다.
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 기본 | 점 6, 현재 점 8, 간격 6 |
상태#
| 상태 | 모습과 동작 |
|---|---|
| 기본 | 지금 단계의 점은 8px primary, 나머지는 6px lineStrong. |
사용 방법#
기본
기본
import { PageDots } from '@/ui/controls';
<PageDots count={4} index={step} />속성(props)#
| 이름 | 타입 | 기본값 | 필수 | 설명 |
|---|---|---|---|---|
count | number | — | 필수 | 전체 단계 수. |
index | number | — | 필수 | 지금 단계(0부터). |
치수와 토큰#
- 점
- 6px 원, 현재 점 8px
- 색
- 현재
primary, 나머지lineStrong - 간격
- 6
접근성#
- 점 줄 전체에 "{전체}단계 중 {현재}단계"라는 이름이 붙는다. 점 하나하나는 읽지 않는다.
잘한 예와 잘못한 예#
함께 보는 컴포넌트#
- CircleButton: 화살표가 들어 있는 둥근 주색 버튼이다. 온보딩에서 다음 단계로 넘어갈 때 쓴다.
- WeekStrip: 월요일부터 일요일까지 7일을 한 줄로 보여 주는 주간 표시다. 공부한 날에는 점이 찍힌다.