SlotText

以逐字符的纵向滚动展示文字变化，适合短标题、状态、计数与计时信息。

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

如何使用

用于槽位式文本替换动效。静态文字用 Text；数值专属滚动可选 NumberFlow 或 NumericText。

text 更新内容，replayKey 可重播同一内容，playOnMount 控制首次展示动效。
animated=false 直接显示；需要遵循系统减少动效偏好时启用 respectMotionPreference。

导入

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

用法

数字

渐变颜色

尺寸

API 参考

属性	类型	默认值	示例	描述
`text`	`string \| number`	`""`	`text="Example"`	最终文字
`direction`	`SlotTextDirection`	`—`	`direction={value}`	文字与数字的语义方向；`normal` 使用公共趋势方向，`reverse` 完整取反
`trend`	`SlotTextTrend`	`0`	`trend={value}`	数字趋势；`0` 自动判断，增加向上、减少向下
`motionRole`	`SlotTextMotionRole`	`"auto"`	`motionRole={value}`	内容语义定性；`text` 显式关闭数字推断，其他值用于普通数值、计时器或倒计时
`skipUnchanged`	`boolean`	`true`	`skipUnchanged`	跳过未变化字符
`interrupt`	`boolean`	`true`	`interrupt`	新内容是否中断当前播放；`true` 从当前画面继续过渡到最新文字，`false` 等待当前播放结束后处理最新文字
`replayKey`	`string \| number`	`0`	`replayKey="Example"`	文字不变时值变化会从空槽位重播；文字变化时只执行正常 diff 动画
`playOnMount`	`boolean`	`false`	`playOnMount`	挂载后是否从空槽位重播
`animated`	`boolean`	`true`	`animated`	是否启用文字动效
`respectMotionPreference`	`boolean`	`false`	`respectMotionPreference`	显式开启后才遵循系统减少动效设置
`transition`	`Partial<SlotTextTransition>`	`—`	`transition={value}`	调试 / Demo 用时序覆盖；不改变默认复刻基线默认行为：参考项目默认值。
`font`	`string`	`—`	`font="Example"`	字体；支持 SnowUI Token
`size`	`string \| number`	`—`	`size="Example"`	字号；支持 SnowUI Token
`weight`	`string \| number`	`—`	`weight="Example"`	字重
`color`	`SnowUIColor \| string`	`—`	`color="Example"`	最终文字颜色；支持 PascalCase 语意色
`lineHeight`	`string \| number`	`—`	`lineHeight="Example"`	行高；支持 SnowUI Token
`align`	`TextMotionAlign`	`—`	`align={value}`	对齐；默认继承父级
`motionColor`	`TextMotionColor`	`—`	`motionColor={value}`	全部目标字符从左到右回落的临时颜色；默认不改变颜色，支持 `chromatic()` 逐字符渐变