Aurelia-split-panel 使用教程
本文介绍基于 Aurelia 的 Split Panel 控件库，它提供了一个轻量、易用的分隔窗口功能，可在你的项目中非常便捷地实现该功能。
这个库提供了以下几个功能：
- horizontal 和 vertical 两种分隔模式
- 左右或上下分隔
- 分隔栏位置可调整
使用 Aurelia-split-panel 能提高前端的交互效果，增加页面的信息密度，提高用户享受。
下载与安装
在 Aurelia 项目下执行如下操作来安装 aurelia-split-panel：
npm install aurelia-split-panel --save
基础用法
你需要在你的项目中引入 <split-panel> 标签进行使用。下面是一个简单的例子：
-- -------------------- ---- -------
-------- -----------------------------------------------------------------------------
------------ -------------- ---------------------- ---------------- ---------------- -------------
---------------------- --------- ------------- ------------- ------------
--- ---- ------- ---- ----
------------------------
---------------------- --------- ------------- --------------
--- ---- ----- ------- ---- ----
------------------------
--------------详细说明：
<split-panel>标签是一个必须的容器，它只能包含<split-panel-container>标签unit属性可以是'px'或'percent'（百分比），标识分隔栏的单位direction属性值可选'horizontal'或'vertical'，指定分隔器方向height属性表示整个 Split Panel 的高度（或宽度）<split-panel-container>用于包含具体内容size属性表示其容器的大小（50 表示占 50%）min-size和max-size属性表示分隔栏大小的最小值和最大值collapsible表示该容器是否可折叠
指导意义
除了基础的使用，aurelia-split-panel 还有其他的组件属性和重要的事件，能够更好地支持你的项目。
splitterMoved
当用户拖动分隔栏时，会触发 splitterMoved 事件。你可以使用下面的代码获取该事件：
import { SplitPanelContainer } from "aurelia-split-panel";
export class SplitPanelContainerDemo {
onSplitterMoved(event: CustomEvent) {
console.log((<SplitPanelContainer>event.target).size);
}
}Intercept
在某些情况下，你可能需要在用户移动分隔栏时先进行一些操作，例如代码验证或限制。你可以使用 Intercept 方法来拦截分隔栏的移动，如下所示：
-- -------------------- ---- -------
------ - ------------------- - ---- ----------------------
------ ----- ----------------------- -
------------------------------- --------------------- ------- -
-- ------------------------- -
------ ------
-
------ -----
-
-splitterDraggingStarted 和 splitterDraggingStopped
你可以使用 splitterDraggingStarted 和 splitterDraggingStopped 事件监听分隔栏拖动开始和结束状态。
-- -------------------- ---- -------
------ - ------------------- - ---- ----------------------
------ ----- ----------------------- -
----------------------------- ------------ -
--------------------- ----------
-
--------------------------- ------------ -
--------------------- ----------
-
-示例代码
下面的代码演示了如何使用 aurelia-split-panel。你可以复制到你的项目中，以便参考。
-- -------------------- ---- -------
-------- -----------------------------------------------------------------------------
------------
--------------
----------------------
----------------
----------------
------------
----------------
--------------------
--------------------
------------------------
----------------
----------------------
-
---------------------- --------- ------------- ------------- ---------
---- --------------------- -------
---- ----------------
----- ----- ----- --- ----- ----------- ---------- ----- --- -- ------- ------ ---------- -- ------ -- ------
----- -------
------
------------------------
---------------------- --------- ------------- --------------
---- --------------------- -------
---- ----------------
----- ----- ----- --- ----- ----------- ---------- ----- --- -- ------- ------ ---------- -- ------ -- ------
----- -------
------
------------------------
--------------结论
在本篇文章中，我们介绍了 aurelia-split-panel 库，它提供了一组简单、紧凑的控件，使用户能够轻松自定义页面分隔区域。我们希望你能喜欢这个库，它带给了我们更佳的用户体验。
官网：https://aurelia.io/ 官网文档：https://aurelia.io/docs/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005630581e8991b448e0dff