angular4套用primeng样式
首先安装primeng
cnpm install primeng --save
这样会在项目目录中增加node_modules\primeng目录
package.json文件增加了以下一行
在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样式的更多相关文章
- 一起学HTML基础-CSS样式表-基本概念、分类、选择器
一.基本概念: CSS (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
- Metro之GridView控件的使用-绑定不同的模板样式显示
最终实现的效果如下: 添加MenuDataSource.cs,字段ImageStyle是用来标识套用的样式 public class MenuGroup { public string GroupTi ...
- Python装饰器通用样式
装饰器本质上是一个函数,该函数用来处理其他函数,它可以让其他函数在不需要修改代码的前提下增加额外的功能,装饰器的返回值也是一个函数对象.它经常用于有切面需求的场景,比如:插入日志.性能测试.事务处理. ...
- [置顶] Asp.Net---css样式的使用方式
Css样式的使用大致分为三种 咱们先来看看一张总括图 1 使用连接的形式调用 有两种发方式调用: A 使用link标签 将样式规则写在.Css的样式文档中,再以<link>标签引入 如 ...
- WPF 10天修炼 第七天- WPF资源、样式、控件模板
WPF资源 对象资源 WPF允许在XAML标记的任意位置定义资源.比如在特定的控件.窗口或应用程序级别定义资源,WPF资源系统提供的对象资源有如下好处: 1. 高效:使用对象资源可以在一个地方定义而 ...
- 第八周(3) Word2007样式
第八周(3) Word2007样式 教学时间 2013-4-19 教学课时 2 教案序号 23 教学目标 1.掌握样式的概念2.能够熟练地创建样式.修改样式的格式,使用样式3.熟练利用样式格式化文档 ...
- jquery css 主菜单样式的跳转
想要实现的效果事实上是挺常见的那种:网页的主菜单一開始有一种默认的样式(如A样式),当鼠标经过某一菜单项时.此菜单项会套用一种样式(如B样式),当鼠标点击某一菜单项时.当前菜单项会套用B样式,其余菜单 ...
- HTML-CSS样式表-★★★常用属性★★★及基本概念、分类、选择器
样式属性 背景与前景: background-color:#F90; /*背景颜色,样式表优先级最高*/ background-image:url(路径); /*设置背景图片(默认)*/ backgr ...
- PrimeNG01 angular集成PrimeNG
1 开发环境 本博文基于angular5 2 步骤 2.1 创建angular5项目 详情参见百度 2.2 下载PrimeNG依赖 npm install primeng --save npm ins ...
随机推荐
- Gcc And MakeFile Level1
简单介绍gcc And make 的使用 基本编译 gcc a.c b.c -o exeName 分步编译 gcc -c a.c -o a.o gcc a.o b.c -o main.o 使用Make ...
- 邮槽 匿名管道 命名管道 剪贴板 进程通讯 转自http://www.cnblogs.com/kzloser/archive/2012/11/04/2753367.html#
邮槽 通信流程: 服务器 客户端 注意: 邮槽是基于广播通信体系设计出来的,它采用无连接的不可靠的数据传输 邮槽可以实现一对多的单向通信,我们可以利用这个特点编写一个网络会议通知系统,而且实现这一的系 ...
- 自学PHP的野方法
1.基础知识 最早的基础知识仅限于那么一点点的html和css,比牛毛还牛毛的一点点.所以最开始是从immoc上看视频和跟着练习,花了有一个多月,看完一个路径从:零开始学习ThinkPHP框架,由于基 ...
- div清空填充
1.清空 $('#editPrize').empty(); 2.填充 var html= '<span>追加</span>'; $('#editPrize' ).append( ...
- Ubuntu 17 Nginx 配置 laravel 运行环境
1 安装 nginx #aptitude install nginx #apatitude install php7.1-fpm 2 在 /etc/nginx/sites-available 建立 s ...
- 命令: go build
命令: go build 参考: https://studygolang.com/articles/9463 go help build 构建编译由导入路径命名的包,以及它们的依赖关系,但它不会安装结 ...
- mongo学习-group操作以及java代码
原数据: /* 1 */ { "_id" : ObjectId("552a330e05c27486b9b9b650"), "_class" ...
- CodeForces 681B Economy Game (暴力)
题意:给定一个数,问能不能 找到非负 a, b, c,使得 a × 1 234 567 + b × 123 456 + c × 1 234 = n. 析:二重循环,去确定c. 代码如下: #inclu ...
- Sypder 安装和使用
一.安装Spyder 我傻傻以为直接下载Spyder就可以用了,但我其实大错特错了.Spyder虽然提供科学计算,但是它还需要一个介于Python和其之间的框架,或者说,显示界面PyQt5.(PyQt ...
- 如何使用Word2016或Office365中的word撰写博客并发布
目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...