组件：分隔线

分隔线组件用于在页面中创建视觉分割线，将不同内容区域或功能模块进行区隔。它支持水平/垂直两种方向、实线/虚线样式，并可在线条中间或两端显示文本。常用于表单分组、内容区分、视觉层次划分等场景。该组件基于 HTML <hr> 或 <div> 元素封装，轻量且易于使用。

典型使用场景：

  • 表单字段分组（个人信息与联系方式之间的分隔）
  • 内容区域划分（文章段落间的视觉分隔）
  • 登录/注册表单中的“或”分隔线
  • 侧边栏菜单分组
  • 卡片或面板内的装饰性分隔

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边 顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

操作属性/方法示例
设置分割线方向类型分隔线1.类型 = "vertical"
设置线条样式（实线/虚线）虚线分隔线1.虚线 = 真
设置线条颜色颜色分隔线1.颜色 = "#1890ff"
设置显示文本文本分隔线1.文本 = "或"
设置文本位置文本位置分隔线1.文本位置 = "left"
设置文本颜色文本颜色分隔线1.文本颜色 = "#999"
调整分隔线尺寸宽度 / 高度分隔线1.宽度 = 400

样式美化参考

分隔线的样式可通过以下属性进行精细控制：

  • 方向与尺寸：
    • 水平分隔线（默认）：通过 宽度 控制线条长度，高度 控制线条粗细（建议 "1px" 或 "2px"）。
    • 垂直分隔线：通过 高度 控制线条长度，宽度 控制线条粗细（建议 "1px" 或 "2px"）。
  • 线条样式：虚线 属性设为 真 时，线条变为虚线样式，默认为实线。
  • 颜色控制：颜色 设置线条颜色，文本颜色 设置文本颜色（若 文本 非空）。
  • 文本显示：当 文本 属性设置非空字符串时，线条中间（或根据 文本位置）会显示该文本，线条被文本截断。
  • 文本位置：文本位置 支持 "left"、"center"、"right"，分别对应文本左对齐、居中、右对齐。
  • 继承属性：通过 背景颜色、边框、外边距、内边距 等可进一步美化容器。

基础示例

创建一个简单的水平分隔线，居中显示“或”字。

变量 分隔线1 = 创建 分隔线()
分隔线1.左边 = 50
分隔线1.顶边 = 50
分隔线1.宽度 = 400
分隔线1.高度 = 2
分隔线1.颜色 = "#d9d9d9"
分隔线1.文本 = "或"
分隔线1.文本位置 = "center"
分隔线1.文本颜色 = "#999"
分隔线1.字体大小 = "14px"
添加组件(分隔线1)

综合示例：表单分组与装饰分隔线

本示例在一个用户注册表单中，使用分隔线将“个人信息”和“账号信息”两个区域分开，并在表单底部添加一条带“已有账号？”文本的分隔线。

' ========== 创建表单容器 ==========
变量 表单容器 = 创建 绝对布局()
表单容器.左边 = 50
表单容器.顶边 = 30
表单容器.宽度 = 360
表单容器.背景颜色 = "#ffffff"
表单容器.边框 = "1px solid #e8e8e8"
表单容器.边框圆角 = "12px"
表单容器.内边距 = "24px"
添加组件(表单容器)

' 标题
变量 标题 = 创建 标签()
标题.文本 = "📝 用户注册"
标题.字体大小 = "20px"
标题.字体粗细 = "bold"
标题.文本颜色 = "#333"
标题.内边距 = "0 0 16px 0"
表单容器.添加组件(标题)

' -------- 第一组：个人信息 --------
变量 个人信息标签 = 创建 标签()
个人信息标签.文本 = "个人信息"
个人信息标签.字体大小 = "14px"
个人信息标签.字体粗细 = "bold"
个人信息标签.文本颜色 = "#666"
个人信息标签.内边距 = "8px 0"
表单容器.添加组件(个人信息标签)

' 姓名输入框
变量 姓名输入 = 创建 单行输入框()
姓名输入.提示文本 = "请输入姓名"
姓名输入.宽度 = 312
表单容器.添加组件(姓名输入)

' 邮箱输入框
变量 邮箱输入 = 创建 单行输入框()
邮箱输入.提示文本 = "请输入邮箱"
邮箱输入.类型 = "email"
邮箱输入.宽度 = 312
表单容器.添加组件(邮箱输入)

' -------- 第一条分隔线 --------
变量 分隔线1 = 创建 分隔线()
分隔线1.宽度 = 312
分隔线1.颜色 = "#e8e8e8"
分隔线1.高度 = 1
分隔线1.内边距 = "12px 0"
表单容器.添加组件(分隔线1)

' -------- 第二组：账号信息 --------
变量 账号信息标签 = 创建 标签()
账号信息标签.文本 = "账号信息"
账号信息标签.字体大小 = "14px"
账号信息标签.字体粗细 = "bold"
账号信息标签.文本颜色 = "#666"
账号信息标签.内边距 = "8px 0"
表单容器.添加组件(账号信息标签)

' 用户名输入
变量 用户名输入 = 创建 单行输入框()
用户名输入.提示文本 = "请设置用户名"
用户名输入.宽度 = 312
表单容器.添加组件(用户名输入)

' 密码输入
变量 密码输入 = 创建 单行输入框()
密码输入.提示文本 = "请设置密码"
密码输入.类型 = "password"
密码输入.宽度 = 312
表单容器.添加组件(密码输入)

' -------- 第二条分隔线（带文本） --------
变量 分隔线2 = 创建 分隔线()
分隔线2.宽度 = 312
分隔线2.颜色 = "#d9d9d9"
分隔线2.高度 = 1
分隔线2.文本 = "已有账号？"
分隔线2.文本位置 = "center"
分隔线2.文本颜色 = "#999"
分隔线2.字体大小 = "12px"
分隔线2.内边距 = "16px 0"
表单容器.添加组件(分隔线2)

' 注册按钮
变量 注册按钮 = 创建 按钮()
注册按钮.文本 = "立即注册"
注册按钮.宽度 = 312
注册按钮.高度 = 44
注册按钮.背景颜色 = "#1890ff"
注册按钮.文本颜色 = "#ffffff"
注册按钮.边框圆角 = "6px"
注册按钮.字体大小 = "16px"
表单容器.添加组件(注册按钮)

' 登录链接
变量 登录链接 = 创建 超链接()
登录链接.文本 = "去登录"
登录链接.地址 = "#"
登录链接.文本颜色 = "#1890ff"
登录链接.字体大小 = "14px"
登录链接.内容水平对齐 = "center"
登录链接.内边距 = "8px 0"
表单容器.添加组件(登录链接)

' ========== 调整组件位置（使用绝对布局） ==========
' 由于绝对布局需要手动设置位置，这里简化：实际项目中可使用弹性布局自动排列。
' 本示例仅演示分隔线的使用，组件的精确定位略。

属性详解

文本

  • 类型： 文本型
  • 说明： 设置或获取分割线中显示的文本内容。若设置为空字符串 ""，则显示为纯线条（无文本）。默认值为空。

虚线

  • 类型： 逻辑型
  • 说明： 设置或获取线条是否为虚线样式。当为 真 时，线条显示为虚线；为 假 时显示为实线。默认 假。

文本位置

  • 类型： 文本型
  • 说明： 设置或获取文本在分割线上的位置。可选值：
    • "left"：文本左对齐（在左侧显示）
    • "center"：文本居中对齐（默认）
    • "right"：文本右对齐（在右侧显示） 仅在 文本 非空时有效。

类型

  • 类型： 文本型
  • 说明： 设置或获取分割线的方向。可选值：
    • "horizontal"（默认）：水平分割线
    • "vertical"：垂直分割线 注意：垂直分割线通常需设置 高度 来指定长度，且 宽度 控制线条粗细。

颜色

  • 类型： 文本型
  • 说明： 设置或获取线条的颜色，支持 CSS 颜色值（如 "#d9d9d9"、"red" 等）。默认值为 "#d9d9d9"。

文本颜色

  • 类型： 文本型
  • 说明： 设置或获取文本的颜色，支持 CSS 颜色值。默认值为 "#999"。

⚠️ 注意事项

  1. 文本与线条的关系：当 文本 非空时，线条会从两端分别延伸至文本两侧，文本居中或根据 文本位置 定位。线条颜色由 颜色 控制，文本颜色由 文本颜色 单独控制。
  2. 垂直分隔线：垂直分隔线通常需要设置 类型 = "vertical"，并指定 高度（线条长度）和 宽度（线条粗细），且 高度 值应大于零。垂直分隔线不支持文本显示（即使设置了 文本 也会被忽略）。
  3. 尺寸单位：宽度 和 高度 支持数值（默认像素）或带单位的字符串（如 "80%"、"200px"）。水平分隔线的 高度 控制粗细，垂直分隔线的 宽度 控制粗细。
  4. 虚线样式：虚线样式可能在不同浏览器中显示略有差异，可通过 内联样式 或 CSS 类自定义 border-style 实现更多变体（如点线、双线等）。
  5. 文本位置与布局：文本位置 仅影响文本在分割线上的水平位置，不影响容器自身的对齐。如需整个分隔线居中，可通过容器的 内容水平对齐 或 显示模式 控制。
  6. 与其他组件的间距：建议通过 外边距 或 内边距 控制分隔线与相邻组件的间距，使其视觉上舒适合适。
  7. 背景颜色：分隔线本身背景透明，如需背景色可将 背景颜色 设置为非透明值。

相关文档

  • 文档框架基础类_视图 —— 视图类提供的所有通用属性和方法
  • 文档文本类组件_标签 —— 配合显示文本标签
  • 文档文本类组件_超链接 —— 配合登录链接使用
  • 文档轻语言网站：轻语言语法速查 —— 拉姆达表达式、条件判断等
  • 文档综合演示：表单分组设计 —— 实际应用示例