React · 设计基础

Typography 排版

统一字体族、字号、字重、行高和内容层级。

字体栈

界面与代码分别使用统一字体栈,组件不能单独指定不一致的字体。

界面字体

UG666 UI · Aa 0123

中文、英文与数字界面内容

等宽字体

UG666 UI · Aa 0123

代码、命令、包名和技术标识

文字层级

字号、字重和行高共同表达层级;组件内部不使用页面级大字。

页面标题 UG666 UI 设计系统 页面唯一主标题
章节标题 UG666 UI 设计系统 主要内容分区
小节标题 UG666 UI 设计系统 组件示例和属性分组
正文 UG666 UI 设计系统 说明、文档正文和控件内容
辅助文字 UG666 UI 设计系统 元信息与补充说明

长内容处理

单行信息使用截断,多行说明使用行数限制;布局必须允许文字收缩,不能撑破容器。

单行截断

这是一段用于验证超长名称、路径和状态文字不会撑破组件边界的示例内容。

多行限制

这是一段用于验证较长说明在紧凑区域内保持稳定高度的示例内容。超出两行的文字会被省略,但完整内容应由具体组件通过可访问方式提供。