前言
在现代 Web 前端开发中，很多时候我们需要使用各种各样的组件库来加速开发。其中， helio-angular-gridster 是一个很棒的 Angular Gridster 组件库，它提供了强大的拖拽功能，可以让我们快速地构建自适应的网格布局。本文就来介绍一下这个 npm 包的使用方法。
安装
使用 npm 安装即可：
npm install helio-angular-gridster
使用
首先需要在 Angular 的模块中引入 HelioGridsterModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------------- - ---- -------------------------
-----------
-------- -
--------------------
---
--
---
--
------ ----- --------- - -然后在组件中使用 helio-gridster 标签：
<helio-gridster [options]="options" [(layout)]="layout" (itemChange)="onItemChange($event)"> <helio-gridster-item [item]="item" [itemComponent]="SomeItemComponent"></helio-gridster-item> </helio-gridster>
其中 options 和 layout 是组件的参数，itemChange 是一个事件，当组件中的子项发生变化时会触发该事件。而 helio-gridster-item 是组件的子组件，表示每一个子项的样式。这里需要注意：[itemComponent] 是必需的，如果不给它赋值的话，组件会抛出一个错误。
options 可以设置一些参数，例如 gridType 表示网格布局的类型，e.g.：fixed 和 scrollVertical。常用的一些 options 如下：
-- -------------------- ---- -------
------- - -
--------- ---------------
------------ -----------------
------- ---
------------ -----
----------------- ----
-------- --
-------- --
-------- --
-------- --
---------------- --
---------------- --
------------ --
------------ --
------------ --
------------ --
---------- -
-------- -----
--
---------- -
-------- -----
-
--
------ - -
- -- -- -- -- ----- -- ----- - --
- -- -- -- -- ----- -- ----- - -
--其中 layout 表示要显示的子项在网格布局中的位置和大小。
实例
下面是一个简单的实例，使用 helio-angular-gridster 实现了一个拖拽排序的图片列表。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------ --------------- ------------- ------------------------------ - ---- -------------------------
------------
--------- --------------------
------------ ---------------------------------
---------- ----------------------------------
--
------ ----- --------------------- ---------- ------ -
-------- ---------------
------- ---------------
----- - -
- --- -- ----- ------ --- ---- ---------------------------------------- --
- --- -- ----- ------ --- ---- ---------------------------------------- --
- --- -- ----- ------ --- ---- ---------------------------------------- --
- --- -- ----- ------ --- ---- ---------------------------------------- --
- --- -- ----- ------ --- ---- ---------------------------------------- --
- --- -- ----- ------ --- ---- ---------------------------------------- --
- --- -- ----- ------ --- ---- ---------------------------------------- --
- --- -- ----- ------ --- ---- ---------------------------------------- --
- --- -- ----- ------ --- ---- ---------------------------------------- --
--
----------- ---- -
------------ - -
--------- -----------------
------------ -----------------
------- --
------------ -----
-------- --
-------- --
-------- --
---------------- --
---------------- --
------------ --
------------ --
---------- -
-------- ----
--
---------- -
-------- ----
-
--
----------- - ------------------- -- -- -- -- -- -- ----- ------- --- - - - - -- ----- ------- --- - - - - -- -------- ---- ----
-
-------------------- ------------------------------- -
----- - ------- - - ----------- -- -------------
-------------------- ---- --------- ---------
-
---------------- ------------- -
----------- - -------------------- -- - --- ------
-
-HTML
-- -------------------- ---- -------
--------------- ------------------- ------------------- ------------------------------------
-------------------- ----------- ---- -- ------- ------------- -------------------------------------
-- ------------------------- ---------------------------
-- --------- --------------
----
----------------------
-----------------
------------ ------------------- ----------------
---- --------------------- ------------------------------- - ---------------- - -----
---- ---------------------------- ------ ----------- ---------------------- --------------------
-------- -- ----------------- -- ---------
------
------
--------------CSS
-- -------------------- ---- -------
----- -
-------- ------
---------- ------
------- - -----
-
--------- -
----------- -----
-
----- -
------- ---- --
-
-------------- -
------- --------
--------- ---------
--------- -------
------------------ ----------
---------------- ------
---------------------- -
------- -----
------ -----
------ -----
----------- -------
---------- -----
------------ -----
-
- -
--------- ---------
---- ----
------ ----
------ -----
-
-结论
使用 helio-angular-gridster 可以非常方便地实现网格布局，并且拥有很多强大的功能。本文简单地介绍了如何使用 helio-angular-gridster 实现一个简单的图片列表，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005757f81e8991b448ea5f6