文本 basic-text
2026年7月20日大约 4 分钟
文本 basic-text
单行 / 多行文本,最常用的组件。可显示固定文案,或绑字段显示动态值。
- 类型串:
basic-text默认尺寸:[300, 60]分类:文本
实时预览
下面渲染的是真实组件(与编辑器 / 运行时同源)。修改右侧「样式参数」,左侧预览实时更新;点击底部「全页面查看」可放大。
属性
下表为本组件特有的属性;
position/size/opacity/background/border/ 联动选中 / 筛选等通用参数见组件手册总览。
basic
| 属性 | 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|---|
text | 文本 | string | 文本 | |
text-arrangement | 文本排列 | select(radioGroup) | horizontal | 可选:horizontal / vertical |
content-overflow | 内容溢出 | select(radioGroup) | hidden | 可选:hidden(裁剪) / auto(滚动条,颜色跟随文字)。超出宽高时出滚动条,内容变长会滚到最底 |
font
| 属性 | 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|---|
text-font | 字体 | font(gradient=true,underline=true,line-through=true) | {"size":20,"color":"#ffffff"} | |
font-spacing | 字体间隔 | number(unit=px) | 0 | |
font-line-height | 行高 | number(unit=px,min=0) | 0 | 0=默认。≤4 按倍数(如 1.7),更大按 px(如 24) |
text-indent | 文字缩进 | number(unit=px) | 0 | |
text-tilt | 文字倾斜 | vector<W,H>(unit=px) | [0,0] | |
text-position | 水平对齐方式 | select(radioGroup) | center | 可选:left / center / right |
text-vertical | 竖直对齐方式 | select(radioGroup) | center | 可选:top / center / bottom |
text-position-relative | 文本位置 | vector<X,Y>(unit=px) | [0,0] | |
font-shadow-color | 发光颜色 | color | #ffffff | |
font-shadow-blur | 发光模糊 | number(unit=px) | -1 | |
font-shadow-offset-x | 水平偏移 | number(unit=px) | 0 | |
font-shadow-offset-y | 垂直偏移 | number(unit=px) | 0 | |
shadow-color | 投影颜色 | color | #ffffff | |
shadow-blur | 投影模糊 | number(unit=px) | -1 | |
shadow-offset-x | 水平偏移 | number(unit=px) | 0 | |
shadow-offset-y | 垂直偏移 | number(unit=px) | 0 |
animation-display
| 属性 | 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|---|
animation-display | 播放动画 | boolean | false | |
animation-type | 动画类型 | select(radioGroup) | scroll | 可选:scroll / blink |
animation-easing | 缓动方式 | select | none | 可选:none / Power1.easeIn / Power1.easeOut / Power1.easeInOut / Power2.easeIn / Power2.easeOut / Power2.easeInOut / Power3.easeIn / Power3.easeOut / Power3.easeInOut / Power4.easeIn / Power4.easeOut / Power4.easeInOut / Sine.easeIn / Sine.easeOut / Sine.easeInOut / Expo.easeIn / Expo.easeOut / Expo.easeInOut / Circ.easeIn / Circ.easeOut / Circ.easeInOut / Back.easeIn / Back.easeOut / Back.easeInOut / Elastic.easeIn / Elastic.easeOut / Elastic.easeInOut / Bounce.easeIn / Bounce.easeOut / Bounce.easeInOut / SlowMo.easeIn / SlowMo.easeOut / SlowMo.easeInOut |
animation-delay | 动画延迟时长 | number<float>(step=0.1,unit=秒) | 1 | |
animation-duration | 单个动画持续时长 | number<float>(step=0.1,unit=秒) | 1 | |
animation-loop | 循环播放动画 | boolean | false | |
animation-interval | 循环间隔时长 | number<float>(step=0.1,unit=秒) | 0 |
数据绑定
| 字段槽 | 类型 / 约束 | 说明 |
|---|---|---|
value-field | field(recommend=string,min=0,max=1) | 动态文本 |
事件
触发器
触发器在预览 / 播放态生效(编辑态点击 = 选中组件)。写在本组件
options.interactions的groups[].trigger里。
| 触发器 | 名称 | 触发时机 | payload(供动作公式 {:字段} 取值) |
|---|---|---|---|
click | 点击 | 点击本组件时触发 | 无 |
mouseEnter | 鼠标移入 | 指针移入组件时触发 | 无 |
mouseLeave | 鼠标移出 | 指针移出组件时触发 | 无 |
appear | 入场 | 组件出现时触发(配合进场动画) | 无 |
disappear | 离场 | 组件消失时触发(配合退场动画) | 无 |
receiveBehaviorEvent | 接收行为事件 | 收到 sendBehaviorEvent 动作或宿主 ctx.emit 投递的事件时触发(按 eventName 匹配) | 发送方携带的 data |
动作
触发器命中后执行的动作。本组件既可发起动作(配在自己的交互里),也可作为其它组件动作的目标。
| 动作 | 名称 | 说明 |
|---|---|---|
changeOption | 修改设置 | 把本组件(或其它组件)的某个属性改为静态值 / 公式动态值 |
switchState | 切换状态 | 切到多状态里的某个状态(state:"" 回默认态) |
appear / disappear | 进 / 退场动画 | 对目标 opacity 做 0↔100 插值的显隐动画 |
完整动作清单(switchScreen / switchWindow / openUrl / sendBehaviorEvent / transfer / executeScript / requestApi 等)与持久化写法见事件交互。
示例
{
"type": "basic-text",
"uid": "w_basic_text",
"options": {
"position": [40, 40],
"size": [300, 60],
"value-field": [["conn_demo", "tbl_demo", "字段名"]]
}
}绑定三元组
[连接uid, 表uid, 字段uid]指向工程connections里的真实字段,见数据系统。