首先安装primeng

cnpm install primeng --save

这样会在项目目录中增加node_modules\primeng目录

package.json文件增加了以下一行

"primeng": "^4.3.0",

在app.module.ts文件中添加:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; import { AppComponent } from './app.component';
import { UserLoginComponent } from './user/user-login/user-login.component'; import { RouterModule } from '@angular/router';
import {appRoutes} from './app.routes';
import {AutoCompleteModule, TabViewModule, ButtonModule} from "primeng/primeng";//新增 @NgModule({
declarations: [
AppComponent,
UserLoginComponent
],
imports: [
BrowserModule,
RouterModule,
RouterModule.forRoot(appRoutes),
AutoCompleteModule,//新增
TabViewModule,//新增
ButtonModule//新增
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

在app.component.html文件中添加显示的代码:

<!-- 顶部导航 -->
<p-tabView orientation="left">
<p-tabPanel header="首页" [selected]="true">
首页内容
</p-tabPanel>
<p-tabPanel header="登录">
登录内容
</p-tabPanel>
<p-tabPanel header="关于">
关于内容
</p-tabPanel>
</p-tabView>

在.angular-cli.json文件中添加:(这个不用添加也可以,看到有的文章添加了,不知道干嘛用的)

"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"
]

最后显示出来的效果:

angular4套用primeng样式的更多相关文章

  1. 一起学HTML基础-CSS样式表-基本概念、分类、选择器

    一.基本概念: CSS  (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  2. Metro之GridView控件的使用-绑定不同的模板样式显示

    最终实现的效果如下: 添加MenuDataSource.cs,字段ImageStyle是用来标识套用的样式 public class MenuGroup { public string GroupTi ...

  3. Python装饰器通用样式

    装饰器本质上是一个函数,该函数用来处理其他函数,它可以让其他函数在不需要修改代码的前提下增加额外的功能,装饰器的返回值也是一个函数对象.它经常用于有切面需求的场景,比如:插入日志.性能测试.事务处理. ...

  4. [置顶] Asp.Net---css样式的使用方式

    Css样式的使用大致分为三种 咱们先来看看一张总括图 1 使用连接的形式调用 有两种发方式调用: A   使用link标签 将样式规则写在.Css的样式文档中,再以<link>标签引入 如 ...

  5. WPF 10天修炼 第七天- WPF资源、样式、控件模板

    WPF资源 对象资源 WPF允许在XAML标记的任意位置定义资源.比如在特定的控件.窗口或应用程序级别定义资源,WPF资源系统提供的对象资源有如下好处: 1.  高效:使用对象资源可以在一个地方定义而 ...

  6. 第八周(3) Word2007样式

    第八周(3) Word2007样式 教学时间 2013-4-19 教学课时 2 教案序号 23 教学目标 1.掌握样式的概念2.能够熟练地创建样式.修改样式的格式,使用样式3.熟练利用样式格式化文档 ...

  7. jquery css 主菜单样式的跳转

    想要实现的效果事实上是挺常见的那种:网页的主菜单一開始有一种默认的样式(如A样式),当鼠标经过某一菜单项时.此菜单项会套用一种样式(如B样式),当鼠标点击某一菜单项时.当前菜单项会套用B样式,其余菜单 ...

  8. HTML-CSS样式表-★★★常用属性★★★及基本概念、分类、选择器

    样式属性 背景与前景: background-color:#F90; /*背景颜色,样式表优先级最高*/ background-image:url(路径); /*设置背景图片(默认)*/ backgr ...

  9. PrimeNG01 angular集成PrimeNG

    1 开发环境 本博文基于angular5 2 步骤 2.1 创建angular5项目 详情参见百度 2.2 下载PrimeNG依赖 npm install primeng --save npm ins ...

随机推荐

  1. 大楼轮廓 · building-outline

    [抄题]: 水平面上有 N 座大楼,每座大楼都是矩阵的形状,可以用一个三元组表示 (start, end, height),分别代表其在x轴上的起点,终点和高度.大楼之间从远处看可能会重叠,求出 N  ...

  2. 用Diff和Patch工具维护源码

    在Unix系统下,维护源码版本可以使用很多方法,其中最常用的当然是大名鼎鼎的CVS,但实际上,简单的版本维护工作并没有必要使用复杂的CVS等专门的版本维护工具,Unix标配中的diff和patch工具 ...

  3. 8-@Pointcut( "execution(* com.ctgu.controller.AccountController.transfer(..))" ) 拦截配置问题

    @pointcut()可以直接指定到某个包下的某个类的某个方法上:

  4. 获取地址栏的URL: PHP JS

    1. PHP 获取上一页的URL 在php中可以通过内置的变量的属性来获取上一页的URL: $_SERVER['HTTP_REFERER']. 但是在IE中如果跳转是通过js函数如: window.l ...

  5. Go基本数据类型

    Go基本数据类型 第一部分:基本数据类型和操作符 1. 文件名&关键字&标识符 1. 所有go源码以.go结尾 2. 标识符以字母或下划线开头,大小写敏感,比如: a. boy  b. ...

  6. SSL握手通信详解及linux下c/c++ SSL Socket代码举例

    SSL握手通信详解及linux下c/c++ SSL Socket代码举例 摘自:http://www.169it.com/article/3215130236.html   分享到:8     发布时 ...

  7. Python中numpy.apply_along_axis()函数的用法

    numpy.apply_along_axis(func, axis, arr, *args, **kwargs): 必选参数:func,axis,arr.其中func是我们自定义的一个函数,函数fun ...

  8. CentOS7通过 yum安装路径查询方法

    CentOS7通过 yum安装路径查询方法 rpm -qa 然后执行 rpm -ql 软件名称 就可以显示软件的安装路径. 原文博客的链接地址:https://cnblogs.com/qzf/

  9. Mysql索引会失效的几种情况分析(转)

    出处:http://www.jb51.net/article/50649.htm 索引并不是时时都会生效的,比如以下几种情况,将导致索引失效: 1.如果条件中有or,即使其中有条件带索引也不会使用(这 ...

  10. JAVA内存管理再解

    首先我们要明白一点,我们所使用的变量就是一块一块的内存空间!!   一.内存管理原理:   在java中,有java程序.虚拟机.操作系统三个层次,其中java程序与虚拟机交互,而虚拟机与操作系统间交 ...