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