介绍
angular-gridster2-1 是一个基于 Angular 的网格布局库，用于快速构建可拖拽的网格布局。它支持自适应布局，例如流式布局和响应式布局，并提供了丰富的 API，可以快速定制你的网格布局。
安装
如果你已经安装了 Angular，可以直接使用 npm 安装 angular-gridster2-1。
npm install angular-gridster2-1 --save
快速开始
首先，在你的主模块中导入 GridsterModule：
import { GridsterModule } from 'angular-gridster2-1';
@NgModule({
imports: [GridsterModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}然后在模板文件中使用 <gridster> 标签创建网格布局。你可以使用 [options] 属性设置布局的选项：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
--------- --------------------
-------------- ----------- ---- -- ---------- ------------------------------
-----------
-
--
------ ----- ------------ -
-------- ---------------
---------- --------------------
------------- -
------------ - -
--------- ------
------- ---
------------ -----
--------------- -----
----------------- -----
------------------ -----
---------------- -----
------------------------ -----
----------------- ----
-------- --
-------- ---
-------- --
-------- ---
------------ ---
------------ ---
------------ --
------------ --
---------------- --
---------------- --
-------------- ----
--------------- ----
------------------------ ------
----------------------- ------
------------------ ---
------------ ---
---------- -
-------- ----
--
---------- -
-------- ----
-
--
-------------- - -
------ -- ----- -- -- -- -- ---
------ -- ----- -- -- -- -- ---
------ -- ----- -- -- -- -- ---
------ -- ----- -- -- -- -- ---
------ -- ----- -- -- -- -- ---
------ -- ----- -- -- -- -- ---
------ -- ----- -- -- -- -- ---
------ -- ----- -- -- -- -- ---
------ -- ----- -- -- -- -- --
--
-
-在这个例子中，我们使用 GridsterConfig 定义了一些布局选项，用于设置网格布局的外边距、内边距、行数、列数等。在模板中，我们使用 <gridster> 标签来创建布局，并使用 *ngFor 循环显示多个 <gridster-item>。
<gridster-item> 组件用于指定一个网格项，它的属性包括位置和大小，可以使用 GridsterItem 类型来定义。网格项也可以拖拽和调整大小。
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------- ------------ - ---- ----------------------
------------
--------- -----------
--------- -
--------- --------------------
-------------- ----------- ---- -- ---------- --------------
---- ------------------------------
------------- - -------------
------
----------------
-----------
--
------- --
---------------------- -
----------------- -----
------- --- ----- -----
----------- -------
-------- -----
-
--
--
------ ----- ------------ -
-------- ---------------
---------- --------------------
------------- -
------------ - -
--------- ------
------- ---
------------ -----
--------------- -----
----------------- -----
------------------ -----
---------------- -----
------------------------ -----
----------------- ----
-------- --
-------- ---
-------- --
-------- ---
------------ ---
------------ ---
------------ --
------------ --
---------------- --
---------------- --
-------------- ----
--------------- ----
------------------------ ------
----------------------- ------
------------------ ---
------------ ---
---------- -
-------- ----
--
---------- -
-------- ----
-
--
-------------- - -
------ -- ----- -- -- -- -- ---
------ -- ----- -- -- -- -- ---
------ -- ----- -- -- -- -- ---
------ -- ----- -- -- -- -- ---
------ -- ----- -- -- -- -- ---
------ -- ----- -- -- -- -- ---
------ -- ----- -- -- -- -- ---
------ -- ----- -- -- -- -- ---
------ -- ----- -- -- -- -- --
--
-
-在这个例子中，我们创建了一个 10 列的网格，使用了 9 个网格项。每个网格项的大小和位置都不同。我们给每个网格项添加了一个灰色的背景和边框，并显示了它的大小。你可以根据实际需求修改网格项的大小和位置，以及添加自己的内容。
总结
angular-gridster2-1 是一个非常强大的网格布局库，它可以帮助你快速构建可拖拽的网格布局，并提供了丰富的 API，可以定制你的布局。如果你需要一个更灵活的网格布局，可以尝试使用 angular-gridster2-1。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c9881e8991b448e60a3