组件:标签
标签组件用于显示静态文本或动态变量内容,支持通过字体、字体大小、文本颜色、内容水平对齐方式、首行缩进等样式调整,常用于界面标题、表单标签、状态提示及说明文字场景。
典型使用场景:
- 页面标题(主标题、副标题、章节标题)
- 表单标签(用户名、密码、邮箱等字段标签)
- 状态提示(成功、警告、错误信息)
- 说明文字(帮助文本、提示信息)
- 数值显示(统计数字、价格展示)
📌 继承自视图的成员速查
本组件继承自 视图 类,可直接使用以下属性和方法:
属性: ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用
方法: 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边 顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)
事件: 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)
💡 完整成员列表及详细说明请参考:
视图类
常用操作速查
| 操作 | 属性/方法 | 示例 |
|---|---|---|
| 设置标签文本 | 文本 | 标签1.文本 = "用户名:" |
| 设置字体大小 | 字体大小 | 标签1.字体大小 = "16px" |
| 设置文本颜色 | 文本颜色 | 标签1.文本颜色 = "#333333" |
| 设置字体粗细 | 字体粗细 | 标签1.字体粗细 = "粗体" |
| 设置文本对齐 | 内容水平对齐方式 | 标签1.内容水平对齐方式 = "center" |
| 设置首行缩进 | 首行缩进 | 标签1.首行缩进 = "2em" |
| 设置背景颜色 | 背景颜色 | 标签1.背景颜色 = "#f0f0f0" |
| 设置禁用状态 | 禁用 | 标签1.禁用 = 真 |
样式美化参考
以下为常用样式组合示例,可根据实际需求调整:
标题样式变体:
- 主标题:
字体大小 = "24px",字体粗细 = "粗体",文本颜色 = "#333333" - 副标题:
字体大小 = "18px",字体粗细 = "粗体",文本颜色 = "#666666" - 小标题:
字体大小 = "16px",字体粗细 = "粗体",文本颜色 = "#999999"
状态样式:
- 成功状态:
文本颜色 = "#52c41a",文本 = "✓"(前缀图标) - 警告状态:
文本颜色 = "#faad14",文本 = "⚠"(前缀图标) - 错误状态:
文本颜色 = "#ff4d4f",文本 = "✗"(前缀图标) - 信息状态:
文本颜色 = "#1890ff",文本 = "i"(前缀图标)
尺寸样式:
- 大尺寸标签:
字体大小 = "20px",高度 = 48,行高 = "48px" - 中尺寸标签:
字体大小 = "16px",高度 = 36,行高 = "36px" - 小尺寸标签:
字体大小 = "12px",高度 = 24,行高 = "24px"
对齐样式:
- 左对齐:
内容水平对齐方式 = "left"(默认) - 居中对齐:
内容水平对齐方式 = "center" - 右对齐:
内容水平对齐方式 = "right"
交互效果:
- 鼠标悬浮:通过
置鼠标被进入回调改变颜色,例如:标签1.置鼠标被进入回调((源对象, 事件对象) => { 标签1.文本颜色 = "#1890ff" }) 标签1.置鼠标被移出回调((源对象, 事件对象) => { 标签1.文本颜色 = "#333333" })
基础示例
简单场景内完整的标签使用演示
' 1. 创建标签
变量 标签1 = 创建 标签()
' 2. 设置属性
标签1.左边 = 100
标签1.顶边 = 100
标签1.宽度 = 200
标签1.高度 = 36
标签1.文本 = "这是一段说明文本"
标签1.字体大小 = "16px"
标签1.文本颜色 = "#333333"
标签1.字体粗细 = "粗体"
标签1.内容水平对齐方式 = "center"
' 3. 设置事件回调(可选)
标签1.置被单击回调((源对象, 事件对象) => {
弹出提示("标签被点击了!")
})
' 4. 添加到父容器
添加组件(标签1)
综合示例:用户信息卡片
本示例展示标签与编辑框、按钮配合使用的完整用户信息展示场景,所有组件均在代码中创建,不依赖外部 XML 定义。
' ========== 创建用户信息卡片容器 ==========
变量 卡片容器 = 创建 标签()
卡片容器.左边 = 20
卡片容器.顶边 = 20
卡片容器.宽度 = 360
卡片容器.高度 = 200
卡片容器.背景颜色 = "#ffffff"
卡片容器.边框圆角 = "8px"
卡片容器.边框 = "1px solid #e8e8e8"
卡片容器.内边距 = "16px"
添加组件(卡片容器)
' ========== 创建用户头像标签 ==========
变量 标签_头像 = 创建 标签()
标签_头像.左边 = 20
标签_头像.顶边 = 20
标签_头像.宽度 = 60
标签_头像.高度 = 60
标签_头像.文本 = "👤"
标签_头像.字体大小 = "32px"
标签_头像.内容水平对齐方式 = "center"
标签_头像.行高 = "60px"
添加组件(标签_头像)
' ========== 创建用户名标签 ==========
变量 标签_用户名 = 创建 标签()
标签_用户名.左边 = 100
标签_用户名.顶边 = 20
标签_用户名.宽度 = 200
标签_用户名.高度 = 30
标签_用户名.文本 = "张三"
标签_用户名.字体大小 = "18px"
标签_用户名.字体粗细 = "粗体"
标签_用户名.文本颜色 = "#333333"
添加组件(标签_用户名)
' ========== 创建邮箱标签 ==========
变量 标签_邮箱 = 创建 标签()
标签_邮箱.左边 = 100
标签_邮箱.顶边 = 55
标签_邮箱.宽度 = 220
标签_邮箱.高度 = 24
标签_邮箱.文本 = "zhangsan@example.com"
标签_邮箱.字体大小 = "14px"
标签_邮箱.文本颜色 = "#666666"
添加组件(标签_邮箱)
' ========== 创建用户状态标签 ==========
变量 标签_状态 = 创建 标签()
标签_状态.左边 = 100
标签_状态.顶边 = 85
标签_状态.宽度 = 100
标签_状态.高度 = 24
标签_状态.文本 = "✓ 在线"
标签_状态.字体大小 = "12px"
标签_状态.文本颜色 = "#52c41a"
添加组件(标签_状态)
' ========== 创建用户等级标签 ==========
变量 标签_等级 = 创建 标签()
标签_等级.左边 = 220
标签_等级.顶边 = 85
标签_等级.宽度 = 80
标签_等级.高度 = 24
标签_等级.文本 = "VIP 3"
标签_等级.字体大小 = "12px"
标签_等级.文本颜色 = "#faad14"
标签_等级.背景颜色 = "#fff7e6"
标签_等级.边框圆角 = "12px"
标签_等级.内容水平对齐方式 = "center"
标签_等级.行高 = "24px"
添加组件(标签_等级)
' ========== 创建分隔线标签 ==========
变量 标签_分隔线 = 创建 标签()
标签_分隔线.左边 = 20
标签_分隔线.顶边 = 120
标签_分隔线.宽度 = 320
标签_分隔线.高度 = 1
标签_分隔线.背景颜色 = "#f0f0f0"
添加组件(标签_分隔线)
' ========== 创建创建时间标签 ==========
变量 标签_时间 = 创建 标签()
标签_时间.左边 = 20
标签_时间.顶边 = 130
标签_时间.宽度 = 150
标签_时间.高度 = 20
标签_时间.文本 = "注册时间:2023-01-01"
标签_时间.字体大小 = "12px"
标签_时间.文本颜色 = "#999999"
添加组件(标签_时间)
' ========== 创建最后登录标签 ==========
变量 标签_登录 = 创建 标签()
标签_登录.左边 = 200
标签_登录.顶边 = 130
标签_登录.宽度 = 140
标签_登录.高度 = 20
标签_登录.文本 = "最后登录:今天"
标签_登录.字体大小 = "12px"
标签_登录.文本颜色 = "#999999"
添加组件(标签_登录)
' ========== 创建编辑按钮 ==========
变量 按钮_编辑 = 创建 按钮()
按钮_编辑.左边 = 280
按钮_编辑.顶边 = 125
按钮_编辑.宽度 = 60
按钮_编辑.高度 = 30
按钮_编辑.文本 = "编辑"
按钮_编辑.字体大小 = "12px"
按钮_编辑.背景颜色 = "transparent"
按钮_编辑.文本颜色 = "#1890ff"
按钮_编辑.边框 = "1px solid #1890ff"
按钮_编辑.边框圆角 = "4px"
按钮_编辑.置被单击回调((源对象, 事件对象) => {
弹出提示("编辑用户信息")
})
添加组件(按钮_编辑)
属性:文本
- 类型:
文本型 - 说明: 设置或获取标签显示的文本内容。
属性:文本颜色
- 类型:
文本型 - 说明: 设置或获取标签文本的颜色,支持颜色名称(如 "red")或十六进制值(如 "#ff0000")。
属性:字体大小
- 类型:
文本型 - 说明: 设置或获取标签文本的字体大小,支持像素值(如 "16px")或相对值(如 "1em")。
属性:字体粗细
- 类型:
文本型 - 说明: 设置或获取标签文本的字体粗细,支持 "normal"(正常)、"bold"(粗体)、"lighter"(细体)等。
属性:内容水平对齐方式
- 类型:
文本型 - 说明: 设置或获取标签文本的水平对齐方式,支持 "left"(左对齐)、"center"(居中对齐)、"right"(右对齐)。
属性:首行缩进
- 类型:
文本型 - 说明: 设置或获取标签文本首行的缩进距离,支持像素值(如 "20px")或相对值(如 "2em")。
⚠️ 注意事项
- 文本换行:标签默认不自动换行,如需多行文本可设置
宽度属性限制宽度。 - HTML内容:可通过
InnerHTML属性设置包含HTML标签的内容。 - 样式继承:标签继承视图类的所有样式属性,可使用
内联样式设置自定义CSS。 - 事件支持:标签支持鼠标和键盘事件,可添加交互功能。
- 性能优化:大量标签时建议使用
文本属性而非InnerHTML,性能更好。
相关文档
- 文档
框架基础类_视图—— 视图类提供的所有通用属性和方法 - 文档
文本类组件_按钮—— 与标签配合使用的按钮组件 - 文档
文本类组件_编辑框—— 与标签配合使用的编辑框组件 - 文档
轻语言网站:轻语言语法速查—— 拉姆达表达式语法规则 - 文档
综合演示:用户信息卡片—— 完整卡片布局示例