Skip to content

Text 文本 ​

文本展示原语:消费全局排版令牌,支持字号级别、字重、色调与对齐。

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

字号级别 ​

level 映射到 typography.fontSize.<level> 令牌,默认 base。

9:41Text 字号

特大 extraLarge

大 large

中 medium

基准 base(默认)

小 small

特小 extraSmall

HTML 模拟预览(鸿蒙 / ArkUI 外观),非真机渲染

typescript
LhText({ content: '标题文字', level: LhTextLevel.Large })

字重 ​

weight 映射到 typography.fontWeight.<weight> 令牌(primary 400 / bold 600)。

9:41Text 字重

常规 primary(默认)

加粗 bold

HTML 模拟预览(鸿蒙 / ArkUI 外观),非真机渲染

色调 ​

tone 映射到 color.text.<tone> 令牌;selected 取 color.selected。

9:41Text 色调

主要 primary(默认)

常规 regular

次要 secondary

占位 placeholder

禁用 disabled

选中 selected

HTML 模拟预览(鸿蒙 / ArkUI 外观),非真机渲染

对齐与行高 ​

align 决定文字在行盒宽度内的水平定位(不是设计令牌,映射到框架枚举);行高恒取 typography.lineHeight.primary,layout 高度 = 字号 × 行高。

9:41Text 对齐

左对齐 start(默认)

居中 center

右对齐 end

HTML 模拟预览(鸿蒙 / ArkUI 外观),非真机渲染

typescript
LhText({ content: '右对齐', align: LhTextAlign.End })

明暗主题 ​

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

9:41暗色文本

大标题

正文主色

次要说明

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

API ​

Props ​

属性说明类型默认值
content文本内容(spec 的 default 插槽)string''
level字号级别,映射到 typography.fontSize.<level>LhTextLevelBase
weight字重,映射到 typography.fontWeight.<weight>LhTextWeightPrimary
tone文字色调,映射到 color.text.<tone> 或 color.selectedLhTextTonePrimary
align水平对齐方式(在行盒宽度内生效)LhTextAlignStart

LhTextLevel ​

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

LhTextWeight ​

值fontWeight
Primarytypography.fontWeight.primary(400)
Boldtypography.fontWeight.bold(600)

LhTextTone ​

值文字色
Primarycolor.text.primary
Regularcolor.text.regular
Secondarycolor.text.secondary
Placeholdercolor.text.placeholder
Disabledcolor.text.disabled
Selectedcolor.selected

LhTextAlign ​

值端侧映射
StartTextAlign.Start
CenterTextAlign.Center
EndTextAlign.End

令牌对照 ​

文本消费的令牌(与 specs/text.json 的 tokenRefs 逐条对齐,全部是全局令牌—— text 没有组件级令牌):

令牌用途
typography.fontSize.{extraLarge,large,medium,base,small,extraSmall}六档字号
typography.fontWeight.{primary,bold}两档字重
typography.lineHeight.primary行高(layout 高度 = 字号 × 行高)
color.text.{primary,regular,secondary,placeholder,disabled}五档文字色调
color.selected选中态文字色

黄金用例对照 ​

cases/text.json 的 5 条断言与 hypium 测试的对应关系(entry/src/test/Text.test.ets):

case id断言本地测试
default-level-uses-base-tokens默认级消费 base 套排版令牌default_level_uses_base_tokens
large-level-uses-large-tokenlarge 字号令牌生效,base 未误用large_level_uses_large_token
bold-weight-uses-bold-tokenbold 字重令牌生效,primary 未误用bold_weight_uses_bold_token
secondary-tone-uses-text-secondarysecondary 文字色令牌生效secondary_tone_uses_text_secondary
render-emits-single-text-command指令流仅一条 TEXT 指令resolve_produces_single_complete_text_style

另有暗色专项:dark_colors_come_from_dark_tokens / dimensions_are_identical_in_dark_mode。 运行:DevEco Studio 右键 entry/src/test → Run Tests。