Skip to content

Text 文本

表达文本语义与状态。构成界面语言与布局结构的基础单元。

实时示例

LIVE · TextElement Plus / sunui
默认正文交互文本成功状态一段需要在有限空间中截断的工单描述内容
Vue 示例
<el-text />

使用规则

应该

优先使用语义明确的属性和统一间距,不以装饰替代信息层级。

避免

不要通过局部硬编码改变品牌色、圆角或状态语义;不要隐藏必要的操作反馈。

状态与变体

  • 默认、悬停、聚焦、按下和禁用状态必须保持可辨识。
  • 加载、空、错误状态按业务影响选用,不用品牌强调色表达错误。
  • 紧凑尺寸只用于高密度后台场景,触控目标仍应满足可操作要求。

基础用法

<el-text>文本</el-text>

设计变量

color.text.primarycolor.border.defaultspacing.mdradius.md

无障碍

保持可见焦点;图标操作必须提供可访问名称;正文对比度不低于 4.5:1。