溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言：眾所周知，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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
