롤링 숫자
숫자 칸마다 0~9 띠를 세로로 굴려 값에 멈추는 숫자 텍스트입니다. 처음 그려질 때는 0에서, 값이 바뀌면 이전 숫자에서 굴러 갑니다. CSS만 써서 서버 컴포넌트로 렌더되고, 움직임 줄이기 설정에서는 값만 바로 보입니다. 화면 낭독기와 복사는 전체 값을 한 문자열로 읽습니다. StatCard · DataStatCard 값, Gauge 중앙 숫자, DonutChart centerLabel이 이 컴포넌트를 씁니다.
상태
1,019만문자열 값 (숫자만 굴림)
42.8%숫자 값 + format
활용 방법
값 바꾸기
자리는 오른쪽부터 같은 칸을 유지합니다. 987에서 12,450으로 자리가 늘어도 일의 자리 칸이 그대로 굴러 가고, 새로 생긴 칸은 0에서 굴러 옵니다.
Preview
1,019만원
tsx
<RollingNumber value={value} /><RollingNumber value="1,019만" /><RollingNumber value={0.4275} format={{ style: "percent", minimumFractionDigits: 1 }} />
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| value | number | string | - | 보일 값. 문자열은 포맷 없이 그 안의 0~9만 굴린다 |
| locale | string | "ko-KR" | 숫자 value 포맷 locale |
| format | Intl.NumberFormatOptions | - | 숫자 value 포맷 옵션(소수 자리, 통화, 퍼센트) |
| className | string | - | root span 클래스. 글자 크기 · 굵기 · 색은 부모에서 상속된다 |