深入探究angular2 UI组件之primeNG用法


Posted in Javascript onJuly 26, 2017

前言:众所周知,primeNG是ng2的一个ui组件库,很强大,个人感觉比ng2-bootstrap还强大,下面就告诉大家怎么安装使用,官网:http://www.primefaces.org/primeng/#/

本人使用angular cli 创建项目,所以讲述在cli下的配置安装步骤,如果没有使用cli也不用担心,官网有具体的安装步骤。

1、 安装

cd 你的项目目录

npm install primeng --save-dev

2、 配置angular-cli.json

omega是一种主题,还有很多主题,bootstrap等等......

"styles": [
 "styles.css",
 "../node_modules/primeng/resources/themes/omega/theme.css",
 "../node_modules/primeng/resources/primeng.min.css",
 "../node_modules/font-awesome/css/font-awesome.css"
],

需要注意的是系统中的所有小图标都使用font-awosome字体库,font-awosome.css是字体图标文件,需要安装

npm install font-awosome --save

3、使用,需要使用的组件,都要在app.module.ts中加载

// 载入primeng模块
import {AutoCompleteModule, TabViewModule, ButtonModule} from "primeng/primeng"

......

@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 FormsModule,
 HttpModule,
 AutoCompleteModule,
 ButtonModule,
 TabViewModule
 ],

......

4、模板中就可以使用模块中定义的组件了

// 按钮
<button pButton type="button" label="Click"></button>

// 标签页
<p-tabView>
 <p-tabPanel header="Header 1">
 Content 1
 </p-tabPanel>
 <p-tabPanel header="Header 2" [selected]="true" [closable]="true">
 Content 2
 </p-tabPanel>
 <p-tabPanel header="Header 3">
 Content 3
 </p-tabPanel>
</p-tabView>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
详解JS函数重载
Dec 04 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
vue里面父组件修改子组件样式的方法
Feb 03 Javascript
JS快速实现简单计算器
Apr 08 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 #Javascript
关于Stream和Buffer的相互转换详解
Jul 26 #Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 #Javascript
JS数组操作中的经典算法实例讲解
Jul 26 #Javascript
你有必要知道的10个JavaScript难点
Jul 25 #Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 #Javascript
jQuery实现键盘回车搜索功能
Jul 25 #jQuery
You might like
一次编写,随处运行
2006/10/09 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
学Python 3的理由和必要性
2019/11/19 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
python 写一个性能测试工具(一)
2020/10/24 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
什么是.net
2015/08/03 面试题
面向对象设计的原则是什么
2013/02/13 面试题
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
个人合作协议书范本
2014/04/18 职场文书
校庆标语集锦
2014/06/25 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
药店促销活动总结
2014/07/10 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
2015年宣传工作总结
2015/04/08 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书