카운트업 숫자
처음 보일 때 숫자가 목표값까지 올라가요. 연출용이에요.
모바일PCCountUp
고르기#
이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.
언제 쓰나#
- 숫자가 굴러가며 바뀌는 표시.
인터페이스#
타입에서 자동으로 뽑은 표예요.
CountUp#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| value* | - | number | 지금 값이에요. |
| format | - | (n: number) => string | 값을 사람 말로 바꿔요. |
| duration | 1600 | number | |
| className | - | string | 배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요. |
| from | - | number | |
| decimals | 0 | number | |
| mount | 'zero' | 'value' | 'zero' |
* 필수예요. 표는 타입에서 자동으로 뽑았어요.
접근성#
- 동작 줄이기 설정이면 바로 최종값을 보여 줘요.
가이드라인#
쓰는 규칙#
이렇게 하지 않아요
- 자주 바뀌는 값에는 처음부터 굴리지 않아요 - mount="value"로 처음 값은 그대로 두고 바뀔 때만 굴려요.
플랫폼별 차이#
| 플랫폼 | 차이 |
|---|---|
| 모바일 | PC와 같은 모양이에요. 글자 역할만 폰 크기로 바뀌어요. |
| PC | 마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요. |