简介
angular2components-static是一个用于构建现代 Web 应用程序的 Angular2 组件库。它提供了一套完整的 UI 组件，包括表格、下拉框、标签页等常见UI组件。
它的特点是，它既支持静态 HTML，也支持使用 Angular2 进行动态渲染。因此，您可以轻松地将这些组件集成到任何 Web 应用程序中，包括静态 HTML 页面和使用 Angular2 构建的动态 Web 应用程序。
使用angular2components-static可以让您快速创建漂亮、现代的 Web 应用程序，并使您的 Web 应用程序更易于维护和扩展。
安装
要使用angular2components-static，请首先安装npm包。
npm install angular2components-static --save
使用
要使用angular2components-static，您需要将其导入到您的应用程序中。以下是导入的示例。
-- -------------------- ---- -------
-- -------------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ------------------------------ - ---- ----------------------------
-----------
-------- -
--------------
------------------------------
--
------------- - ------------ --
---------- - ------------ -
--
------ ----- --------- - -组件列表
angular2components-static包含以下各种类型的组件。
表单组件
- <acp-form-group> 表单组
- <acp-input> 文本框
- <acp-radio> 单选框
- <acp-checkbox> 复选框
- <acp-select> 下拉框
- <acp-textarea> 文本域
- <acp-datetime-picker> 日期和时间选择器
布局组件
- <acp-modal> 模态框
- <acp-card> 卡片
- <acp-grid> 网格
- <acp-steps> 步骤
数据展示组件
- <acp-table> 表格
- <acp-masonry-grid> 瀑布流
示例
以下是一个简单的使用angular2components-static的示例。
app.component.html
<acp-card title="Hello World">
<acp-form-group>
<acp-input [(ngModel)]="name" label="Name"></acp-input>
<acp-input [(ngModel)]="email" label="Email"></acp-input>
<acp-datetime-picker [(ngModel)]="date" label="Date"></acp-datetime-picker>
</acp-form-group>
<button class="btn btn-primary" (click)="submit()">Submit</button>
</acp-card>app.component.ts
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----- -------
------ -------
----- -----
------------- -
--------- - ---
---------- - ---
--------- - --- -------
-
-------- -
------------------ ------------- ------ -------------- ----- ---------------
-
-结论
angular2components-static使得创建漂亮、现代的 Web 应用程序变得更加容易。如果您需要使用一套完整的 UI 组件库，它将是一个理想的选择。它不仅支持静态 HTML，而且还支持使用 Angular2 进行动态渲染，因此您可以将其轻松地集成到任何类型的 Web 应用程序中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560f381e8991b448df296