Skip to content

Text 文本 ​

文本组件。按级别、字重、色调与对齐渲染单段文字,全部排版值取自 typography 令牌。

契约源:lh-ui-core/specs/text.json · 黄金用例:lh-ui-core/cases/text.json(5 条,已翻译为 xUnit 测试)

级别 ​

六档级别映射到 typography.fontSize.* 令牌;默认级别为 base。

9:41Text 级别
青花瓷 extraLarge
青花瓷 large
青花瓷 medium
青花瓷 base
青花瓷 small
青花瓷 extraSmall

HTML 模拟预览(Windows / WinUI 3 外观),非真机渲染

csharp
var text = new LhText
{
    Text = "青花瓷",
    Level = LhTextLevel.Large,
};

字重与色调 ​

Weight 映射到 typography.fontWeight.* 令牌;Tone 映射到 color.text.*(selected 取 color.selected)。

9:41字重与色调
加粗 bold
次要说明 secondary
占位文字 placeholder
选中态 selected

HTML 模拟预览(Windows / WinUI 3 外观),非真机渲染

对齐 ​

Align 决定文字在行盒宽度内的水平定位(非设计令牌,映射到 WinUI 的 TextAlignment)。

9:41对齐
左对齐 start
居中 center
右对齐 end

HTML 模拟预览(Windows / WinUI 3 外观),非真机渲染

明暗主题 ​

切换站点右上角主题,模拟器手机框内的文字色即变;真机通过 LhTheme.Apply(true) 切换。

9:41暗色文本
常规文字 regular
次要说明 secondary

HTML 模拟预览(Windows / WinUI 3 外观),非真机渲染;明/暗值全部取自 core 令牌快照

API ​

属性 ​

属性说明类型默认值
Text文字内容(spec 的 default 插槽)string""
Level字号级别,映射到 typography.fontSize.*LhTextLevelBase
Weight字重,映射到 typography.fontWeight.*LhTextWeightPrimary
Tone文字色调,映射到 color.text.* / color.selectedLhTextToneRegular
Align水平对齐(映射到 TextAlignment)LhTextAlignStart

LhTextLevel ​

值字号令牌
ExtraLargetypography.fontSize.extraLarge(20epx)
Largetypography.fontSize.large(18epx)
Mediumtypography.fontSize.medium(16epx)
Basetypography.fontSize.base(14epx)
Smalltypography.fontSize.small(13epx)
ExtraSmalltypography.fontSize.extraSmall(12epx)

LhTextWeight ​

值字重令牌
Primarytypography.fontWeight.primary(400,端侧映射 Normal)
Boldtypography.fontWeight.bold(600,端侧映射 SemiBold)

LhTextTone ​

值颜色令牌
Primarycolor.text.primary
Regularcolor.text.regular
Secondarycolor.text.secondary
Placeholdercolor.text.placeholder
Disabledcolor.text.disabled
Selectedcolor.selected

LhTextAlign ​

值WinUI 映射
StartTextAlignment.Left
CenterTextAlignment.Center
EndTextAlignment.Right

令牌对照 ​

令牌用途
typography.fontSize.{extraLarge…extraSmall}六档字号
typography.fontWeight.{primary,bold}两档字重
typography.lineHeight.primary行高(行盒高度 = 字号 × 行高)
typography.fontFamily国风衬线字体栈
color.text.{primary,regular,secondary,placeholder,disabled}中性色调
color.selected选中态色调

黄金用例对照 ​

cases/text.json 的 5 条断言与 xUnit 测试的对应关系(tests/LhTextTests.cs):

case id断言本地测试
default-level-uses-base-tokens默认级别消费 base 排版令牌Default_Level_Uses_Base_Tokens
large-level-uses-large-token大级别消费 large 字号令牌Large_Level_Uses_Large_Token
bold-weight-uses-bold-token粗体消费 bold 字重令牌Bold_Weight_Uses_Bold_Token
secondary-tone-uses-text-secondary次要色调取次要文字色令牌Secondary_Tone_Uses_Text_Secondary
render-emits-single-text-command有且仅有一条 TEXT 指令Render_Emits_Single_Text_Command

另有暗色专项:Dark_Colors_Come_From_Dark_Tokens / Dimensions_Are_Identical_In_Dark_Mode。 运行:cd lh-ui-windows && dotnet test。