什么是 @ndelangen/golden-layout？
@ndelangen/golden-layout 是一个基于 web 的布局库。它允许开发者使用自定义的 HTML 元素和 CSS 样式来创建可拖放、可调整大小和可分割的布局。这个库提供了一个简便的方式来创建一个多功能的前端布局，可以被用于各种不同的应用程序和网站。
该提供商是一个免费和开源的项目。它支持多种浏览器包括谷歌，火狐，Safari和IE9及以上版本。它还支持 touchpad、鼠标和键盘的友好操作。@ndelangen/golden-layout 的配置文件可以被以 JSON 格式导入和导出，这使得它更加方便与其他开发者的工作。
如何使用 @ndelangen/golden-layout？
安装
首先，你需要通过 npm 安装 @ndelangen/golden-layout，使用以下命令：
npm install @ndelangen/golden-layout --save
简单的应用示例
以下是一个 @ndelangen/golden-layout 能力的基础示例。
在你的 HTML 中，你可以使用以下代码来定义一个布局：
-- -------------------- ---- -------
---- ------------------
---- --------------- ---------------------------- --------
---- --------------- ---------------------------- ----------
---- --------------- ----------------------------- ----- ------------ --- ---- -------
---- --------------- ----------------------------- ----- ------------ --- ---- -------
------
---- --------------- ----------------------------- ----- ------------ --- ---- -------
------
------这里有三个不同类型的容器：my-layout、my-item 和 stack。
这里使用了 data-golden-layout 属性，它被用于指定该元素所关联的布局描述的 JSON，这个元素成为了一个可拖放的窗口，并且会随着用户的操作而改变。
使用以下代码创建 GoldenLayout 实例：
-- -------------------- ---- ------- ------ ------------ ---- --------------------------- ----- -------- - --- -------------- --------- ------ -- -- ----------- ------ -- -- -------- ------ -- -- ---------- ------------ -- ----- --- ----------------
深入了解 @ndelangen/golden-layout
@ndelangen/golden-layout 提供了不同的选项和功能，可以深入了解它的 API 和配置来实现更高级的布局设计。
以下是一个复杂的布局，它包括很多可定制化的参数：
-- -------------------- ---- -------
------ ------------ ---- ---------------------------
----- ------------ - --- --------------
--------- -
----------- ----- -- ---------
------------------------- ----- -- ---------
--------------- ----- -- --------
----------------- ------ -- ---------
----------------- ------ -- ---------------
------------------------- ----- -- ----------
--------------------- ----- -- ------
--------------- ----- -- --------
----------------- ----- -- ---------
-------------- ----- -- --------
--------------- --------- -- -------------------
-------------------- -- -- ---------
---------------------- ------ -- --------------
----------------- -- -- ------
--
----------- -
------------ -- -- ----
-------------- --- -- ----
------------- --- -- ----
------------- --- -- ----
--------------- ---- -- -------
---------------- --- -- -------
--
-------- -
-
----- ------
-------- -
-
----- --------
------ ------ ---
-------- -
-
----- ------------
------ ---------- ---
-------------- ----------------
--------------- - ------ -------- -
--
-
----- ------------
------ ---------- ---
-------------- ----------------
--------------- - ------ -------- -
-
-
--
-
----- ---------
-------- -
-
----- --------
------ ------ ---
-------- -
-
----- ------------
------ ---------- ---
-------------- ----------------
--------------- - ------ -------- -
--
-
----- ------------
------ ---------- ---
-------------- ----------------
--------------- - ------ -------- -
-
-
--
-
----- --------
------ ------ ---
-------- -
-
----- ------------
------ ---------- ---
-------------- ----------------
--------------- - ------ -------- -
--
-
----- ------------
------ ---------- ---
-------------- ----------------
--------------- - ------ -------- -
-
-
-
-
-
-
-
--
----------- -
-------------- -------------
-
---
----------------------------------------------- ---------------
--------------------总结
@ndelangen/golden-layout 是一个出色的布局工具，可以让您轻松地创建可定制的、现代化的布局，使用户拥有更好的体验和细致的使用。它拥有一个强大的 API 和功能，可以让您实现非常高级和复杂的布局设计。安装、简单的应用示例和深入了解都被提供了，即使您是初学者，也可以轻松上手。所以，不要犹豫，开始使用 @ndelangen/golden-layout，打造高效的前端应用吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e24487e