文本 Text
最常用的组件,显示一段文字。
用法
编辑器右上角 ➕ 添加 text,在"内容"字段写要显示的文字。可以是固定文字、占位符,或者两者混合。
| 内容字段写 | 显示效果 |
|---|---|
Hello | Hello |
{name} | 显示 JS 里 this.name 的值 |
你好 {name},今天 {temp}° | 你好 Alice,今天 26° |
占位符语法详见 占位符语法。
常用属性
| 属性 | 说明 |
|---|---|
| 内容 | 显示的文字 / 占位符 |
| 字号 | 文字大小,可写固定数字或占位符 |
| 字体 | 系统字体或自定义字体 |
| 颜色 | 前景色;支持单色 / 渐变 |
| 行数 | 默认不限制(0=无限);设 1 表示单行 |
| 字号缩放 | 默认 0.9,文字过长时按比例缩小到能显示 |
| 截断模式 | 文字过长且不能再缩时,从哪里裁掉(头/中/尾) |
| 对齐 | 居中 / 居左 / 居右 |
| 旋转 / 偏移 | 用于做特殊效果 |
| 背景色 | 文字背景,默认透明 |
| 圆角 | 给背景加圆角 |
字号也可以动态化
字号字段写 {size} 也成立 — JS 里给 this.size = 18 就能动态控制字号。
例:展示一行 JS 数据
this.title = "未读"
this.count = 12
| 组件 | 内容 |
|---|---|
| text | {title} |
| text | {count} |
| text(混) | {title}: {count} 条 |