介绍
gb-angular-split 是一个基于 Angular 的 npm 包，可以用来快速创建可拖拽的分割面板。gb-angular-split 的使用非常简单且灵活，是一个非常实用的前端工具。
安装
要安装 gb-angular-split，只需要在终端中执行以下命令：
npm install gb-angular-split
使用
导入组件
导入 gb-angular-split 组件，可以在你的 Angular 组件中实现可拖拽分割面板：
import { GbSplitModule } from 'gb-angular-split';
@NgModule({
imports: [ GbSplitModule ]
})模板插入
在你的 HTML 模板中插入 gb-split 指令，并指定配置选项：
<gb-split [config]="config"> <div>区域1</div> <div>区域2</div> </gb-split>
配置选项
在你的组件中定义配置选项：
-- -------------------- ---- -------
------ - ------------- - ---- -------------------
------ ----- ------------ -
------- ------------- - -
---------- -------------
------ ---- ----
---------- -----
-------- ----- -----
-------- ----- -----
----------- ---
------------- -
------- ------
-
--
-配置选项详解
direction：方向，默认是水平方向。可以是"horizontal"或"vertical"。sizes：两个子区域的初始百分比大小。数组长度应为 2，并且两个值的总和应该是 100 。collapsed：是否折叠。默认为false。minSize：每个区域允许被调整大小的最小范围。数组长度应为 2。maxSize：每个区域允许被调整大小的最大范围。数组长度应为 2。gutterSize：各区域之间的间隔大小，单位为像素。默认为10。elementStyle：CSS 样式表应用于整体组件的 div 元素。
示例
下面是一个简单的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- -------------------
------------
--------- -----------
--------- -
--------- ------------------
---- ------------------------ ---------------
---- ------------------------ ---------------
-----------
-
--
------ ----- ------------ -
------- ------------- - -
---------- -------------
------ ---- ----
---------- -----
-------- ----- -----
-------- ----- -----
----------- ---
------------- -
------- ------
-
--
-结论
gb-angular-split 是一个非常实用的前端工具，可以帮助你快速创建可拖拽的分割面板。使用 gb-angular-split 非常简单，只需要导入组件并指定配置选项即可。我相信，gb-angular-split 会在你的工作中大放异彩！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5451ab1864dac66999