Symmetric-block 是一款通过简单配置实现节点对称布局的 npm 包。它可以帮助前端开发者方便地实现复杂树形结构的展示，提高页面的可读性和美观度。在这篇文章中，我们将介绍 Symmetric-block 的使用教程，包括安装、基本配置、高级配置和示例代码，并结合实际案例讲解如何使用 Symmetric-block 解决前端布局问题。
安装
首先，我们需要使用 npm 来安装 Symmetric-block。打开命令行工具，输入以下命令：
--- ------- ---------------
基本配置
Symmetric-block 的基本配置非常简单。只需要在 HTML 文件中添加一个容器节点，引入 Symmetric-block 的脚本和样式文件，然后，指定数据源和节点模版即可。以下是一个基本的配置示例：
---- -------------------------------------
------- ------------------------------------------
----- ---------------- -----------------------------------
--------
--- ---------- - -
- --- -- ----- ------ ------- ------
- --- -- ----- ------ ------- ---
- --- -- ----- ------ ------- ---
- --- -- ----- ------ ------- ---
- --- -- ----- ------ ------- ---
- --- -- ----- ------ ------- ---
- --- -- ----- ------ ------- ---
--
--- ------------ - -------------- -
------ ----- ---------------------------- ---------- - ------- -
-------- ----------------------------------- - --------- -
----------------
--
--- ------- - -
----------- -----------
------------- ------------
--
--- ----- - --- -------------------------------------------------------------------- ---------
---------这里，我们首先定义了一个数据源数组 dataSource，它包含了节点的 id、名称和父节点 id。然后，我们定义了一个节点模版函数 nodeTemplate，它根据节点的数据生成节点的 HTML。最后，我们将数据源、节点模版和容器节点传入 SymmetricBlock 构造函数，就可以生成一个具有对称布局的节点树了。
高级配置
在实际项目中，我们需要满足更加丰富和多样化的需求。Symmetric-block 也提供了一些高级配置选项，可以帮助我们实现更加高级和灵活的布局控制。
Orientation
通过 rotationAngle 或者 orientation 属性可以调整节点的展示方向。默认情况下，节点是水平展示的。如果想要节点垂直排列，可以设置 rotationAngle 或者 orientation 属性为 90：
--- ------- - - ----------- ----------- ------------- ------------- -------------- -- --
或
--- ------- - - ----------- ----------- ------------- ------------- ------------ ---------- --
LevelGap
通过 levelGap 属性可以调整节点间的间距。如果想要节点间的间距更大或更小，可以设置 levelGap 属性，单位是像素：
--- ------- - - ----------- ----------- ------------- ------------- --------- -- --
AsideGap
通过 asideGap 属性可以调整节点和其对应的子树之间的间距。如果想要调整子树和父节点之间的距离，可以设置 asideGap 属性，单位是像素：
--- ------- - - ----------- ----------- ------------- ------------- --------- -- --
NodeMargin
通过 nodeMargin 属性可以调整节点的边距。如果想要节点间的间距更大或更小，可以设置 nodeMargin 属性，单位是像素：
--- ------- - - ----------- ----------- ------------- ------------- ----------- -- --
NodeAlign
通过 nodeAlign 属性可以调整节点在布局方向上的对齐方式。如果想要节点居中展示，可以设置 nodeAlign 属性为 'center'：
--- ------- - - ----------- ----------- ------------- ------------- ---------- -------- --
示例代码
我们来看一个实际项目中使用 Symmetric-block 的案例。
案例需求
假设我们需要展示一个城市之间的路线图。每个城市都有一个图标和一些必要信息，每两个城市之间可以有一条路径。我们希望这个城市之间的图形展示要求美观、简洁而清晰。我们可以使用 Symmetric-block 来轻松实现这个需求。
案例实现
增加 HTML 页面文件。在 head 中加入以下代码
------
---------------------------------
----------
----- ------------------------------ ---------------- ----------------
----- --------------------------- ---------------- ----------------
---------
------- ------------------------------------------------------
------- ---------------------- -----------------------------------------
-------- -----------
------- ---------------------- --------------------------
------- ---------------------- ---------------------------
-------在 body 中加入 SymmetricBlock 需要用到的 HTML 代码
------ ---- ------------------------------------- -------
增加 javascript 代码：
- 定义一个节点的渲染方法
-------- ------------------ -
------ ----- ---------------------------- ---------------------
-- --------- -------------------
---- ------------------
----- -------------------------------------
-----
------------
------
-------
-data: 是一个节点的数据，该数据包括了每个城市的图标、名称以及一些描述信息。
- 创建 SymmetricBlock 对象：
--- -------------- - --- -------------------------------------------------------------------- - ----------- ----------- ------------- ------------- --------- --- --------- ---- ----------- -- ---
这里我们通过定义 dataSource 变量来设定节点的数据源，然后根据节点数据的属性生成节点。最后，我们将数据源、节点模版和容器节点传入 SymmetricBlock 构造函数，就可以生成符合城市图路线需求的对称布局了。
其中，上述代码实现的核心是 createSymmetricBlock 函数。它负责将城市图路线数据转化成能够被 Symmetric-block 库识别的数据结构格式，并调用 SymmetricBlock 渲染城市路线图。
通过 Symmetric-block 将城市之间的路线图实现了对称布局，保证页面美观、简洁而明晰。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600559e281e8991b448d775c