React 组件

UGText 文本

用于统一短文本的语义色、尺寸、省略和 HTML 标签，同时保留原生属性与内容组合能力。

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGText } from '@ug666/ui-react'

通过 tone 设置文本类型；默认色用于正文，语义色用于需要明确状态的短文本。

默认文本主色文本次要文本辅助文本成功文本信息文本警告文本危险文本

五档字号覆盖紧凑辅助文本、默认正文和强调内容，默认值可由 UGConfigProvider 统一设置。

XS 文本SM 文本默认文本MD 文本LG 文本

truncate 处理单行溢出，lineClamp 限制多行文本的最大显示行数。

这是一段宽度受限后自动显示省略号的单行文本

这段文字由父容器挤压，并在末尾显示省略号

多行文本可以限制最大显示行数。这里放入一段明显超过两行的说明文字，用来确认第三行及后续内容会被裁切。它适合卡片摘要、列表描述、搜索结果说明和其他空间受限的内容区域。

通过 as 改变实际 HTML 元素，文本样式与原生语义同时生效。

span 文本

段落文本

粗体文本斜体文本下标 H₂O上标 x²插入文本~~删除文本~~标记文本辅助注释2026-07-27pnpm add @ug666/ui-react

默认内容支持嵌套文本，也可以组合图标和小型操作组件。

你有一条新的系统通知当前状态：运行正常文本可与操作组合

UGConfigProvider 统一默认尺寸，单个文本仍可通过组件属性局部覆盖。

继承全局大尺寸局部覆盖为小号

属性	类型	默认值	说明
tone	TextTone	'default'	设置默认、主色、层级色或成功、信息、警告、危险等语义色。
size	TextSize	ConfigProvider / default	设置 xs、sm、default、md 或 lg 字号；未设置时继承全局尺寸。
truncate	boolean	false	单行文本溢出时显示省略号；组件或父容器必须提供可计算的宽度。
lineClamp	number \| string	—	限制最大显示行数，并裁切超出的多行内容；有效值优先于 truncate。
as	ElementType	'span'	设置实际渲染的任意原生元素或 React 组件，并保留文本视觉规则。
children	ReactNode	—	文本内容，可嵌套文本、图标和其他行内组件。
className	string	—	追加业务样式类，用于宽度、对齐或局部视觉覆盖。
style	CSSProperties	—	透传原生 style；与 lineClamp 生成的样式合并。
原生属性	HTMLAttributes<HTMLElement>	—	透传 id、title、aria-、data- 和原生事件等属性。
ref	HTMLElement	—	获取最终渲染的 HTML 元素。