前言
ngx-onsenui是一个基于Angular框架的UI组件库。它的一些特点包括易用性、高度可定制等，另外由于其组件的UI风格与iOS风格高度一致，在一些项目中也广受欢迎。本篇文章将会详细介绍ngx-onsenui的安装、使用及相关示例。
安装ngx-onsenui
安装ngx-onsenui需要先安装npm，此处不做介绍。ngx-onsenui则通过命令行进行安装。
npm install ngx-onsenui
安装成功后，在angular.json文件中添加配置：
"styles": [
"node_modules/onsenui/css/onsenui.css",
"node_modules/onsenui/css/onsen-css-components.css",
"src/styles.css"
],
"scripts": [
"node_modules/onsenui/js/onsenui.js"
]其中，node_modules/onsenui/css/onsenui.css为onsenui的默认css样式，node_modules/onsenui/css/onsen-css-components.css则为onsenui组件库的组件css文件。返回到项目目录下，输入以下命令行：
npm start
使用以上命令启动项目。若项目能正常启动且显示onsenui的UI效果，则表示已成功安装ngx-onsenui。
使用ngx-onsenui
ngx-onsenui的使用可以分为两步：添加组件及设置参数。以下将深入介绍其中的一些组件及使用方法。
Page（页面）
ons-page组件是onsenui中的核心组件。它将整个页面所需内容包装在其中，并且包括顶部工具栏及底部tab栏。下面是添加一组基础的ons-page组件的示例代码：
<ons-page>
<ons-toolbar>
<div class="center">我的页面</div>
</ons-toolbar>
<div class="content">
我是页面的内容
</div>
</ons-page>在以上示例中，通过ons-toolbar设置了一个标题为“我的页面”的标题栏，通过div标签设置ons-page组件中的内容。
接下来介绍如何在一个ons-page中添加ons-list（列表）组件。
List（列表）
ons-list组件是用于显示列表内容，并且可以定制每一个列表的样式。
-- -------------------- ---- -------
----------
-------------
---- ---------------------------
--------------
----------
-----------------------------------------
---------------
---- --------------------------
---- ----------------------
----------------
---------------
---- --------------------------
---- ----------------------
----------------
---------------
---- --------------------------
---- ----------------------
----------------
-----------
-----------以上示例中，通过ons-list-header显示了列表的标题，ons-list-item则显示了列表项。
下面示例代码展示如何在一个ons-page中添加ons-input（文本框）组件。
Input（文本框）
ons-input组件对应了HTML标准中的input标签，其支持type为text、password、email等类型。
-- -------------------- ---- -------
----------
-------------
---- ----------------------------
--------------
---------- ----------- ---------------------------------
---- ------------------ ------
---------- --------------- ---------------------------------
------
-----------以上示例显示了一个文本框（类型为text）及一个密码框（类型为password）。
Button（按钮）
ons-button组件对应了HTML标准中的button标签。
<ons-button>普通按钮</ons-button> <ons-button modifier="large">大按钮</ons-button> <ons-button modifier="cta">CTA按钮</ons-button> <ons-button modifier="quiet">较小的按钮</ons-button>
以上示例也通过modifier属性进行了个性化定制。
结论
此篇文章详细介绍了ngx-onsenui的安装、使用及相关示例。本文所涉及的内容在实际开发中均常常用到，具有实际指导意义。细节上实现方式可根据实际项目具体进行调整。
参考文献：
- ngx-onsenui官网：https://onsen.io/v2/api/angular2/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b6151ab1864dac672df