FlowText

以流动过渡展示文字和数字变化，适合动态文案、计数、计时与倒计时。

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

如何使用

用于文本内容更新时的流动过渡。普通静态文字用 Text；数字专属变化先比较 NumericText 与 NumberFlow。

value 是目标文本或数值；数值格式用 locales / format，附加内容通过 children 提供。
motionColor、transition 等控制公开动效；需要遵循系统减少动效偏好时显式启用 respectMotionPreference。

导入

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

用法

数字

渐变颜色

尺寸

API 参考

属性	类型	默认值	示例	描述
`value`	`FlowTextValue`	`—`	`value={value}`	目标文本或数值
`locales`	`string`	`"en-US"`	`locales="Example"`	数字格式化区域
`format`	`Intl.NumberFormatOptions`	`—`	`format={value}`	数字格式化选项
`trend`	`FlowTextTrend`	`0`	`trend={value}`	数值趋势；`0` 使用公共分类能力自动判断
`motionRole`	`TextMotionRole`	`"auto"`	`motionRole={value}`	内容语义定性
`transition`	`FlowTextTransition`	`—`	`transition={value}`	可覆盖时序；默认主动画与布局 550ms，逐位间隔与 NumericText 一致
`digits`	`Record<number, { max?: number }>`	`—`	`digits={digitsOptions}`	分段计时器的 modulo 定义，仅参与公共趋势判断
`textPosition`	`"left" \| "right"`	`"right"`	`textPosition="left"`	FlowText 内容相对 `children` 的位置
`rollDirection`	`FlowTextRollDirection`	`"normal"`	`rollDirection={value}`	控制统一字符纵向流动语义；`normal` 使用公共趋势方向，`reverse` 完整取反
`loading`	`boolean`	`—`	`loading`	加载状态；与 skeleton 同时开启时显示骨架，未设置时遵循容器状态
`skeleton`	`boolean`	`—`	`skeleton`	控制骨架显示，未设置时遵循容器骨架状态
`renderHints`	`RenderHints`	`—`	`renderHints={value}`	骨架形状与尺寸提示
`respectMotionPreference`	`boolean`	`false`	`respectMotionPreference`	显式开启后遵循系统减少动效设置
`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}`	内容变化时全部目标字符的临时颜色，包括保留字符；resolver 的 index / total 对应目标全文的 grapheme 索引与总数，动效结束后回到文字颜色
`children`	`Snippet`	`—`	`<FlowText>Content</FlowText>`	文本前后缀内容