사용법
값이 바뀔 때 숫자가 이전 값에서 목표 값까지 부드럽게 증가해요.
이번 달 방문
12,840명인터페이스
AnimatedNumberProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| value* | number | — | 목표 숫자 |
| from | number | 0 | 시작 숫자 |
| duration | number | 800 | 애니메이션 길이(ms) |
| locale | Intl.LocalesArgument | — | 숫자 표기 로케일 |
| formatOptions | Intl.NumberFormatOptions | — | 숫자 포맷 옵션 |
| prefix | string | — | 접두사 |
| suffix | string | — | 접미사 |
| className | string | — | 루트 클래스 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수 |
AnimatedNumber 컴포넌트 Props 표
가져오기
모션 CSS는 @goldtreedev/ui/motion.css를 함께 import해요.
@import "@goldtreedev/ui/motion.css";
import { AnimatedNumber } from "@goldtreedev/ui";