深入探究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 相关文章推荐
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
扩展jQuery 键盘事件的几个基本方法
Oct 30 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
js继承的实现代码
Aug 05 Javascript
Jquery post传递数组方法实现思路及代码
Apr 28 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
javascript用函数实现对象的方法
May 14 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 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
php计算年龄精准到年月日
2015/11/17 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
jquery replace方法去空格
2017/05/08 jQuery
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
在vue项目中使用sass的配置方法
2018/03/20 Javascript
Python 多线程抓取图片效率对比
2016/02/27 Python
Python中str.format()详解
2017/03/12 Python
Pycharm学习教程(2) 代码风格
2017/05/02 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
Django 再谈一谈json序列化
2020/03/16 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
法学专业应届生求职信
2013/10/16 职场文书
教师实习自我鉴定
2013/12/18 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
临床专业自荐信
2014/06/22 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
文体活动总结
2015/02/04 职场文书
酒店前台辞职书
2015/02/26 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
Python中的嵌套循环详情
2022/03/23 Python
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript