在Angular6中使用primeNG UI框架

第一步：使用ng new project

ng new PrimeNGproject

第二步：可以运行一下是否成功

ng s

第三步：安装primeNG

npm install primeng

第四步：安装font-awesome(一个图标字体库和CSS框架 )

npm install font-awesome

第五步：配置angular.json

 "styles": ["src/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"
],

注意：如果angular版本在六以下，则是配置配置angular-cli.json，本质是一样的，只是Angular6将angular.json替代了angular-cli.json

第六步：使用primeNG中的组件时，需要将primeNG中的模块在App.module导入进来，因为有很多组件需要引入，我们可以新建一个primeNG.module.ts文件，专门用来引进primeng中的各个组件模块


import { NgModule } from '@angular/core';import {PanelMenuModule,...
} from 'primeng/primeng';@NgModule({exports: [PanelMenuModule,...]
})
export class PrimeNGModule { }

再在App.module.ts中声明

import { PrimeNGModule } from './primeng.module';
@NgModule({declarations: [...],imports: [PrimeNGModule,...],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

第七步：添加demo,添加一个panelmenu

html：
<p-panelMenu [model]="items" [style]="{'width':'300px'}"></p-panelMenu>
ts:
this.items = [{label: '车机功能',items: [{label: '车机应用',      items: [    //下一级菜单{label: '频率',items: [{label: 'content',routerLink: './content',    //添加路由command: (event) => {       //添加回调函数，即点击‘content’的时候会触发该函数console.log('0', event)}},{label: 'test',routerLink: './test',}],},]}],}];

具体每个组件的使用去primeNG官网查看就好了

在Angular6中使用primeNG UI框架相关推荐

微信小程序中使用第三方ui框架方法
安装步骤安装前确定电脑上安装了node. (没有设置探宝镜像的先设置淘宝镜像,安装速度更快) 设置淘宝镜像: npm config set registry https://registry.npm ...
HeyUI - 自带admin框架、中后台前端UI框架的后起之秀
一款同样优秀的前端 UI 组件库,其基于HeyUI的 admin 框架也是开箱即用的优质框架. 介绍 HeyUI 是基于 Vue2.0 的开源 UI 组件库,是一整套解决方案,所有的组件提供全局的可配 ...
项目中如何修改UI框架的默认样式
我们在使用elementUI时,只能使用框架自带的样式,普通的修改方法并不能实现,我整理了下面几种修改样式的方法. 1. 行内修改样式通过在行内设置style修改,用于局部组件块 <el-bu ...
我写了一个面向源码阅读者的 UI 框架（基于 Vue）
轱辘 UI 官方文档 GitHub 轱辘 UI 是一个不太一样的 UI 框架. 本 UI 框架是一个「面向源码阅读者」的框架.如果对你有帮助,请不要吝惜你的 star. 也就是说,我制作这个框架的目的 ...
桌面应用程序UI框架有哪些
Electron 是一种基于Node.js和Chromium的跨平台框架,可以用于构建桌面应用程序.Electron使用HTML.CSS和JavaScript编写,可以使开发人员使用Web技术开发桌面 ...
Unity好的UI框架
目录 1. 目的 1. 1. 想知道Unity中好的UI框架 2.参考 2.1 基于Unity~UGUI的简单UI框架(附UIFramework源码) 1. 目的 1. 1. 想知道Unity中好的U ...
Kendo UI 框架 HTML5
Kendo UI是一个强大的框架用于快速HTML5 UI开发.基于最新的HTML5.CSS3和JavaScript标准. Kendo UI包含了开发现代JavaScript,JQuery框架开发所需要 ...
semantic ui中文文档_Vuetify-广受欢迎的Material风格的开源UI框架
全世界范围内广受欢迎的 Vue UI 框架,一个非常精致的 Material Design UI 套件. Material Design 风格 UI 框架 Vuetify 是一个基于 Vue.js 精 ...
DevExtreme UI框架在可视化应用程序Nvisual中的实践应用
DevExtreme 是一款跨平台的UI框架,具有开发迅速.性能稳定.组件丰富等优势,在国际有非常高的知名度,并实际应用到众多浏览器应用程序中,开发者可通过jQuery.Vue.React等主流前端库 ...

在Angular6中使用primeNG UI框架

在Angular6中使用primeNG UI框架相关推荐

最新文章

热门文章