介绍
meepo-layout 是一款基于 Angular 2 的前端布局组件库。它提供了响应式的网格系统以及各种常用的页面布局模板，可以帮助开发者快速地搭建网站或应用的布局。此外，meepo-layout 还支持插件化扩展，可以通过安装其他 npm 包来增加更多的布局选项。
安装
可以通过 npm 来安装 meepo-layout：
npm install meepo-layout --save
基本用法
在需要使用 meepo-layout 的组件中引入 LayoutModule，并声明使用的布局组件。例如，使用网格系统需要引入 GridComponent：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ---------------
------ - ------------- - ---- --------------------
------ - ------------ - ---- ------------------
-----------
-------- -
--------------
------------
--
------------- -
-------------
-------------
--
---------- --------------
--
------ ----- --------- - -在组件的模板中使用对应的标签来渲染布局：
<div class="container">
<mp-grid>
<mp-col span="6">col-6</mp-col>
<mp-col span="6">col-6</mp-col>
</mp-grid>
</div>在页面中将会渲染出一个包含两个等宽列的网格布局。
布局选项
meepo-layout 提供了以下基础布局选项：
网格系统
网格系统类似于 Bootstrap 的栅格系统，可以帮助开发者快速地定义网格布局。它由 GridComponent 和 ColComponent 两个组件构成。
GridComponent
GridComponent 用于定义网格系统的容器。它提供了以下属性：
- size: 字符串类型，指定容器的宽度，例如 '1200px'。
- gutter: 字符串类型，指定列与列之间的间距，例如 '20px'。
ColComponent
ColComponent 用于定义网格系统的列。它提供了以下属性：
- span: 字符串类型，指定列占用的栅格数。总栅格数为 24，例如 '6' 表示占用 6/24 的宽度。
- offset: 字符串类型，指定列向右偏移的栅格数，例如 '2' 表示向右偏移 2/24 的宽度。
布局模板
meepo-layout 定义了几种常用的布局模板，包括 HeaderLayoutComponent、SidebarLayoutComponent、FooterLayoutComponent 等，可以通过直接引入组件来快速地搭建常见的页面布局。
插件化扩展
meepo-layout 支持插件化扩展，可以通过安装其他 npm 包来增加更多的布局选项。例如，通过安装 meepo-layout-lazyload 可以增加图片懒加载的功能：
npm install meepo-layout-lazyload --save
然后在需要使用懒加载的组件中引入 LazyloadModule，并声明使用的指令。例如，在 ListComponent 中使用 LazyloadDirective：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ---------------
------ - -------------- - ---- ------------------------
------ - ------------- - ---- -------------------
-----------
-------- -
--------------
-------------
--------------
--
------------- -
-------------
-----------------
--
---------- ---------------
--
------ ----- --------- - -然后在 ListComponent 的模板中使用指令：
<ul>
<li *ngFor="let item of items">
<img [src]="item.img" mpLazyload>
{{item.title}}
</li>
</ul>在页面中将会渲染出一个包含图片懒加载的列表。
总结
meepo-layout 是一款非常实用的前端布局组件库，可以帮助开发者快速地搭建页面布局。此外，它还支持插件化扩展，可以通过安装其他 npm 包来增加更多的功能。希望本文能够帮助到你更好地使用 meepo-layout。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600571f881e8991b448e8440