NumericText

对文字或数字中发生变化的部分进行过渡，保留未变内容，适合简短状态、数值与计时信息。

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

如何使用

用于数值变化时的数字动效。完整文本替换用 FlowText 或 SlotText；样式与格式按公开 API 配置。

通过 value 更新数字，locales / format 控制格式；animated=false 可直接显示结果。
默认遵循减少动效偏好；direction / trend 控制变化方向，字体与颜色使用系统参数。

导入

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

用法

数字

计时器

渐变颜色

尺寸

API 参考

属性	类型	默认值	示例	描述
`value`	`NumericTextValue`	`""`	`value={value}`	显示内容
`locales`	`string`	`"en-US"`	`locales="Example"`	数字格式化区域
`format`	`Intl.NumberFormatOptions`	`—`	`format={value}`	数字格式化选项
`animated`	`boolean`	`true`	`animated`	是否启用内容变化动效
`trend`	`NumericTextTrend`	`0`	`trend={value}`	减少、自动、增加趋势
`direction`	`NumericTextDirection`	`"normal"`	`direction={value}`	语义方向；`normal` 使用公共趋势，`reverse` 将文字、数字、计时器和倒计时方向全部取反
`motionRole`	`TextMotionRole`	`"auto"`	`motionRole={value}`	内容语义定性；`text` 显式关闭数字推断，其他值用于普通数值、计时器或倒计时
`transition`	`Partial<TextMotionTransition>`	`—`	`transition={value}`	与 `numeric-text-main` 一致的动效时序入口；Demo Slow Mode 使用默认行为：{ duration: 550, easing: reference }。
`respectMotionPreference`	`boolean`	`true`	`respectMotionPreference`	与 `numeric-text-main` 一致，默认遵循系统减少动效设置
`font`	`string`	`—`	`font="Example"`	字体
`size`	`string \| number`	`—`	`size="Example"`	字号
`weight`	`string \| number`	`—`	`weight="Example"`	字重
`lineHeight`	`string \| number`	`—`	`lineHeight="Example"`	行高
`color`	`SnowUIColor \| string`	`—`	`color="Example"`	最终文字颜色
`align`	`TextMotionAlign`	`—`	`align={value}`	对齐；默认继承父级
`motionColor`	`TextMotionColor`	`—`	`motionColor={value}`	全部目标字符从左到右回落的临时颜色；默认不改变颜色，支持 `chromatic()` 逐字符渐变