数据展示AnimatedCounter里程表逐位进位格式化

数字滚动

像机械里程表一样的数字滚动，逐位进位，支持小数、千分位与前后缀。

¥ 起

上面的组件正在页面上实时运行，可以直接交互。

安装

在项目根目录执行下面的命令，组件源码会写入 @/components/ui/animated-counter.tsx。

npx shadcn@latest add swamimalode07/rare-ui/animated-counter

用法

组件默认导出（或具名导出）即可直接使用，不需要额外的 Provider。

animated-counter.tsx

1import { AnimatedCounter } from "@/components/ui/animated-counter"
2
3export function Demo() {
4  return (
5    <AnimatedCounter
6      value={128_400}
7      decimals={1}
8      duration={1.2}
9      separator=","
10      prefix="¥"
11      suffix=" 起"
12      className="text-5xl font-semibold"
13    />
14  )
15}

属性

下表列出了该组件公开的主要属性，所有未列出的原生属性都会透传到根元素。

属性	类型	默认值	说明
value	number	—	目标数值。
decimals	number	0	小数位数。
duration	number	—	滚动时长（秒）。
padStart	number	—	最少显示位数，不足补零。
separator	string	—	千分位分隔符。
decimalSeparator	string	—	小数点符号。
grouping	"western" \| "indian"	"western"	分组规则。
prefix	ReactNode	—	前缀。
suffix	ReactNode	—	后缀。