深入探究angular2 UI組件之primeNG用法
前言：眾所周知，primeNG是ng2的一個(gè)ui組件庫(kù)，很強(qiáng)大，個(gè)人感覺比ng2-bootstrap還強(qiáng)大，下面就告訴大家怎么安裝使用，官網(wǎng)：http://www.primefaces.org/primeng/#/
本人使用angular cli 創(chuàng)建項(xiàng)目，所以講述在cli下的配置安裝步驟，如果沒有使用cli也不用擔(dān)心，官網(wǎng)有具體的安裝步驟。
1、 安裝
cd 你的項(xiàng)目目錄
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" ],
需要注意的是系統(tǒng)中的所有小圖標(biāo)都使用font-awosome字體庫(kù)，font-awosome.css是字體圖標(biāo)文件，需要安裝
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> // 標(biāo)簽頁(yè) <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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Angular ng-animate和ng-cookies用法詳解
本文講一下Angular中動(dòng)畫應(yīng)用的部分。這篇文章主要介紹了Angular ng-animate和ng-cookies用法詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
Angular中使用ng-zorro圖標(biāo)庫(kù)部分圖標(biāo)不能正常顯示問題
這篇文章主要介紹了Angular中使用ng-zorro圖標(biāo)庫(kù)部分圖標(biāo)不能正常顯示問題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
AngularJS模糊查詢功能實(shí)現(xiàn)代碼(過(guò)濾內(nèi)容下拉菜單排序過(guò)濾敏感字符驗(yàn)證判斷后添加表格信息)
最近做項(xiàng)目遇到這樣的需求，要求添加球員的功能，具體樣式?jīng)]做具體要求，下面小編給大家?guī)?lái)了AngularJS模糊查詢功能實(shí)現(xiàn)代碼(過(guò)濾內(nèi)容下拉菜單排序過(guò)濾敏感字符驗(yàn)證判斷后添加表格信息)，感興趣的朋友一起看看吧2017-10-10
利用Angular2的Observables實(shí)現(xiàn)交互控制的方法
這篇文章主要介紹了利用Angular2的Observables實(shí)現(xiàn)交互控制的方法，我們主要針對(duì)一些在跟服務(wù)器端交互的時(shí)候遇到的問題，來(lái)看看Observable給我們帶來(lái)的特性。感興趣的可以了解一下2018-12-12
AngularJS利用Controller完成URL跳轉(zhuǎn)
本文的主要內(nèi)容是介紹在AngularJS中怎樣利用Controller實(shí)現(xiàn)URL跳轉(zhuǎn)，本文給出了實(shí)例代碼，簡(jiǎn)單明了，有需要的可以參考學(xué)習(xí)。2016-08-08
基于angular實(shí)現(xiàn)模擬微信小程序swiper組件
這篇文章主要介紹了基于angular實(shí)現(xiàn)模擬微信小程序swiper組件 ,需要的朋友可以參考下2017-06-06
angular.js指令中transclude選項(xiàng)及ng-transclude指令詳解
這篇文章主要研究一下如何使用ng-transclude指令,以及指令的transclude選項(xiàng)的相關(guān)資料，文中介紹的非常詳細(xì)，并給出了完整的示例代碼大家參考學(xué)習(xí)，需要的朋友們下面來(lái)一起看看吧。2017-05-05
AngularJS $http post 傳遞參數(shù)數(shù)據(jù)的方法
今天小編就為大家分享一篇AngularJS $http post 傳遞參數(shù)數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
這篇文章主要幫助大家學(xué)習(xí)使用AngularJS文件上傳控件angular-file-upload，感興趣的小伙伴們可以參考一下2016-02-02
本篇文章主要主要介紹了angularjs之$timeout指令詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06