深入探究angular2 UI組件之primeNG用法
更新時間：2017年07月26日 08:33:32 作者：zxc19890923
本篇文章主要介紹了深入探究angular2 UI組件之primeNG用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
前言：眾所周知，primeNG是ng2的一個ui組件庫，很強(qiáng)大，個人感覺比ng2-bootstrap還強(qiáng)大，下面就告訴大家怎么安裝使用，官網(wǎng)：http://www.primefaces.org/primeng/#/
本人使用angular cli 創(chuàng)建項目，所以講述在cli下的配置安裝步驟，如果沒有使用cli也不用擔(dān)心，官網(wǎng)有具體的安裝步驟。
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" ],
需要注意的是系統(tǒng)中的所有小圖標(biāo)都使用font-awosome字體庫，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)簽頁 <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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Angular2+國際化方案（ngx-translate）的示例代碼
本篇文章主要介紹了Angular2+國際化方案（ngx-translate）的示例代碼，具有一定的參考價值，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了AngularJS的視圖功能應(yīng)用,包括ng-view和ng-template以及$routeProvider的使用，以及 $routeProvider 需要的朋友可以參考下2015-06-06
本文主要介紹AngularJS ng-mousedown 指令,這里幫大家整理了ng-mousedown 指令的基本資料,并附代碼示例,有需要的朋友可以參考下2016-08-08
Angular應(yīng)用tsconfig.json中的lib屬性示例解析
這篇文章主要介紹了Angular應(yīng)用tsconfig.json中的lib屬性示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
這篇文章主要介紹了AngularJS中scope的綁定策略,結(jié)合實例形式簡單分析了AngularJS scope的三種綁定模式的使用方法與相關(guān)注意事項,需要的朋友可以參考下2017-10-10
使用Angular開發(fā)需要非常多的前置知識,比如TypeScript、RxJS等,所以學(xué)習(xí)成本比較高,下面這篇文章主要給大家關(guān)于Angular開發(fā)內(nèi)容的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
這篇文章主要給大家介紹了Angular.JS通過指令操作DOM的方法，文中給出了詳細(xì)的介紹和示例代碼，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-05-05
AngularJS入門教程之與服務(wù)器(Ajax)交互操作示例【附完整demo源碼下載】
這篇文章主要介紹了AngularJS與服務(wù)器Ajax交互操作的方法,可實現(xiàn)post傳輸數(shù)據(jù)的功能,并附帶完整的demo源碼供讀者下載參考,源碼中還包含了前面章節(jié)的示例文件,需要的朋友可以參考下2016-11-11
本文主要介紹AngularJS簡單應(yīng)用程序,這里提供了詳細(xì)的流程和代碼程序，有需要的小伙伴可以參考下2016-08-08
這篇文章主要介紹了AngularJS中的DOM操作,較為詳細(xì)的分析了AngularJS針對DOM操作的原理、實現(xiàn)技巧與相關(guān)注意事項,需要的朋友可以參考下2016-11-11