跳到主要内容

文本

用于展示动态或静态数据。

何时使用

  • 对动态或者静态数据用文本进行展示

一、属性

1. 数据

image-20250613164516639

文本组件的值可以选择手动赋值、字段、视图参数、成员变量。使用方法详见 数据绑定

2. 外观

2.1 类型

image-20240829140852719

类型可以选择“文本”或“段落”。选择“文本”时,文本不会占一整行;选择“段落”时会占据整行。

  • 文本模式效果:

    image-20240829145545620

  • 段落模式效果:

    image-20250613164740555

2.2 文字颜色

image-20250613165000974

可选择提供的 5 种颜色,也可以通过通用样式设置自定义颜色,详见 通用样式

示例:

image-20240829161945656 image-20240829160209540

2.3 基础样式

image-20250613165704448

可设置文本样式:加粗、下划线、删除线,可多选组合。

示例:

image-20250613170128772

2.4 样式模式

image-20250616084757854

文本样式支持“高亮”和“代码”两种模式,效果如下:

image-20250616085331804

3. 功能

3.1 溢出省略

image-20240829163129495

开启溢出省略后,超出容器宽度的文本将显示为省略号:

image-20240829163114245

备注:该功能通常需放在已设置固定宽度的容器组件中使用。

3.2 前缀

用于在文本前添加内容,可选择图标或自定义值。

示例:

image-20240829105921139 image-20240829105947192

效果:

image-20240829151251386 image-20240829151312821

3.3 后缀

与前缀功能类似,区别在于图标或值显示在文本之后。

示例:

image-20240829110418846 image-20240829110630455

效果:

image-20240830172805949

3.4 可拷贝

启用后,文本右侧将显示复制按钮,点击可复制文本内容。

配置项:

image-20240829153506562

效果:

image-20240829153529398

4. 状态

image-20250616090059087

4.1 禁用

设置禁用后,文本呈灰色,鼠标悬浮时显示禁用标志。

示例:

image-20250616090042177

4.2 隐藏

隐藏后,文本在页面上不显示。

二、规则

可配置显示控制,详见 显示控制

三、常见使用场景

1. 展示网页中不需要变更的数据

例如展示系统公告:

image-20240820163109108

2. 搭配组件展示数据

配合其他组件展示动态数据:

image-20240820163149247