介绍
ember-cli-masonry-grid是一个在Ember.js应用程序中嵌入响应式砌体布局的简单解决方案。使用此包，您可以轻松地将砌体布局添加到Ember.js应用程序中。
安装
要安装ember-cli-masonry-grid，请通过npm运行以下命令：
--- ------- ---------------------- ----------
使用方法
在您的Ember.js组件中使用ember-cli-masonry-grid非常简单。您可以根据需要在组件模板中安装和配置砌体布局，如下所示：
------ ----- ---- --------
------ ----------- ---- -------------------------
------ ------- ------------------------
------- ------------
------ ---
------ -
-- ---
--------------------------
-- --------
------------------------
----- ---------
---
------------------------
----- ---------
---
------------------------
----- ---------
---
-
---在组件模板中，您可以像使用任何其他Ember.js组件一样使用{{yield}}，如下所示：
------- ----- -- -------- ------- ------ ---------
您也可以自定义砌体布局的大小和列数：
------ ----- ---- --------
------ ----------- ---- -------------------------
------ ------- ------------------------
------- ------------
------ ---
-------- -
------------ ----
------- ---
------------- -------
--
------ -
-- ---
--------------------------
-- --------
------------------------
----- ---------
---
------------------------
----- ---------
---
------------------------
----- ---------
---
-
---在模板中，您可以根据需要使用{{masonry-grid}}组件：
--------------- --------------- -- -----------
------- ----- -- --------
---- -------------
------- ------
------
---------
-----------------示范
以下是一个简单的示例，演示如何将ember-cli-masonry-grid添加到您的Ember.js应用程序中。
首先，您需要创建一个新的Ember.js应用程序：
----- --- ------ -- ------
然后，在您的应用程序中安装ember-cli-masonry-grid：
--- ------- ---------------------- ----------
接下来，在您的应用程序中添加一个新组件：
----- - --------- -------
在my-grid.js文件中，添加以下代码：
------ ----- ---- --------
------ ----------- ---- -------------------------
------ ------- ------------------------
------- ------------
------ ---
------ -
--------------------------
-- --------
------------------------
----- ---------
---
------------------------
----- ---------
---
------------------------
----- ---------
---
-
---在my-grid.hbs文件中，添加以下代码：
--------------- -- -----------
------- ----- -- --------
---- -------------
------- ------
------
---------
-----------------运行您的应用程序：
----- -----
现在，您的应用程序中应该已经添加了砌体布局组件。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055b8781e8991b448d923d