定价

NumberFlow

Figma 源代码

以逐位滚动和宽度过渡展示数字变化，保留金额、分组符与小数格式，适合计数器和实时指标。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于数字滚动效果。需要不同数字过渡时比较 NumericText；普通静态数值用 Text，不额外启动动效。

  • value 表示数值，无法解析的字符串显示为 0；locales / format 控制数字格式。

  • children 放置前后附加内容；需要遵循系统减少动效偏好时显式启用 respectMotionPreference。

导入

import { NumberFlow } from '@snowui-design-system/components';

用法

计时器

尺寸

API 参考

属性 类型 默认值 示例 描述
value number | string — value="Example" 当前数值；无法解析的字符串按 0 处理
locales string "en-US" locales="Example" 传给 Intl.NumberFormat 的 locale
format Intl.NumberFormatOptions {} format={value} 数字格式化选项
trend TrendResolver 0 trend={value} 明确变化趋势；0 时根据前后数值解析
motionRole TextMotionRole "auto" motionRole={value} 数值趋势的语义角色
transition NumberFlowTransition — transition={value} 覆盖滚轮时长
digits Record<number, { max?: number }> — digits={digitsOptions} 为指定数位声明循环上限，例如时间的十位
numberPosition "left" | "right" "right" numberPosition="left" children 相对数字的位置
rollDirection RollDirection "normal" rollDirection={value} 正常或反向解释趋势方向
loading boolean — loading 显示按当前文本宽度推导的 Skeleton
skeleton boolean — skeleton 接入 Skeleton Context
renderHints RenderHints — renderHints={value} 覆盖 Skeleton 形状与尺寸提示
respectMotionPreference boolean false respectMotionPreference 为 true 时遵守 reduced-motion 并立即提交最终数值
font string — font="Example" 数字字体；未传时继承容器字体
size string | number — size="Example" 数字字号；数字转换为 px，字符串可使用 SnowUI token 或 CSS 值
weight string | number — weight="Example" 数字字重；未传时继承容器字重
lineHeight string | number — lineHeight="Example" 根排版行高；内部滚轮仍使用独立 1em 裁切窗口
color SnowUIColor | string — color="Example" 最终文字颜色，未设置时继承容器
align TextMotionAlign — align={value} 数字内部对齐
motionColor TextMotionColor — motionColor={value} 全部目标字符从左到右依次回落的临时颜色；chromatic() 将完整彩谱连续铺满全部数位，包含保留数位、分隔符及格式化货币符号，不影响 children 附加内容
children Snippet — <NumberFlow>Content</NumberFlow> 数字左侧或右侧的附加内容