bricks/docs/cn.old/splitter.md

bricks.Splitter 组件技术文档

概述

bricks.Splitter 是一个基于 bricks.JsWidget 的轻量级 UI 组件，用于在页面中创建分隔线（<hr> 元素）。它通常用于视觉上分隔不同内容区域，适用于构建模块化布局。

该组件通过 Bricks 框架的工厂模式注册，可通过 bricks.Factory 实例化并插入 DOM。

---

类定义

bricks.Splitter = class extends bricks.JsWidget

• 继承自: bricks.JsWidget
• 用途: 创建水平分隔线（<hr>）
• 注册名称: 'Splitter'

---

构造函数

constructor(ops)

初始化 Splitter 实例。

参数

参数名	类型	说明
ops	Object	可选配置对象（当前未使用，传递给父类）

实现细节

constructor(ops) {
    super({});
}

• 调用父类 bricks.JsWidget 的构造函数。
• 当前不依赖任何配置项，传入空对象 {}。

---

方法

create()

创建并初始化组件的 DOM 结构。

实现

create() {
    this.dom_element = this._create('hr');
}

行为说明

• 使用父类提供的 _create(tagName) 工具方法创建一个 <hr> 元素。
• 将生成的 DOM 元素赋值给实例属性 this.dom_element，供后续操作使用。
• <hr> 是标准 HTML 水平分隔线元素，语义清晰，样式可通过 CSS 自定义。

---

注册与使用

注册组件

bricks.Factory.register('Splitter', bricks.Splitter);

• 将 Splitter 类注册到 bricks.Factory 中，注册名为 'Splitter'。
• 注册后可通过工厂方法动态创建实例。

---

使用示例

1. 手动实例化

const splitter = new bricks.Splitter();
splitter.create();
document.body.appendChild(splitter.getElement()); // 假设 getElement() 返回 dom_element

2. 通过工厂创建（推荐）

const splitter = bricks.Factory.create('Splitter');
splitter.create();
container.appendChild(splitter.dom_element);

---

DOM 结构

生成的 DOM 元素：

<hr>

样式可由外部 CSS 控制，例如：

hr {
  border: 1px solid #ccc;
  margin: 16px 0;
}

---

注意事项

• create() 方法必须被显式调用以生成 DOM 元素。
• dom_element 属性在 create() 调用后才可用。
• 当前版本不支持自定义标签或复杂配置，如需扩展可继承此类或添加参数支持。

---

版本兼容性

• 依赖 bricks.JsWidget 基类和 bricks.Factory 系统。
• 需确保 window.bricks 已初始化。

---

总结

bricks.Splitter 是一个简洁、语义化的分隔线组件，适合在组件化界面中快速插入视觉分隔。其设计遵循 Bricks 框架规范，易于集成与扩展。