Ng Zorro配置

文章目录

Ng Zorro配置
一、app.module里配置
二、引入样式
- 1.使用全部组件样式
- 2.引入组件模块

全局安装：npm i ng-zorro-antd g --save

一、app.module里配置


import { NzConfig, NZ_CONFIG } from 'ng-zorro-antd/core/config';
import { CommonModule } from '@angular/common';
const ngZorroConfig: NzConfig = {// 注意组件名称没有 nz 前缀message: { nzTop: 120 },notification: { nzTop: 240 }
};@NgModule({declarations: [AppComponent],imports: [CommonModule],providers: [{ provide: NZ_CONFIG, useValue: ngZorroConfig }],bootstrap: [AppComponent]
})
export class AppModule {}

二、引入样式

1.使用全部组件样式

代码如下：

在 angular.json 中引入
{"styles": ["node_modules/ng-zorro-antd/ng-zorro-antd.min.css"]
}
在 style.css 中引入预构建样式文件
@import "~ng-zorro-antd/ng-zorro-antd.min.css";

2.引入组件模块

代码如下：

在 style.css 中引入预构建样式文件
@import "~ng-zorro-antd/button/style/index.min.css"; /* 引入组件样式 */最后你需要将想要使用的组件模块引入到你的 app.module.ts 文件和特性模块中。
以下面的 NzButtonModule 模块为例，先引入组件模块：
import { NgModule } from '@angular/core';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { AppComponent } from './app.component';@NgModule({declarations: [AppComponent],imports: [NzButtonModule]
})
export class AppModule { }


然后在模板中使用：
<button nz-button nzType="primary">Primary</button>

袁同学——2020年10月30日

Ng Zorro配置相关推荐

angular7中引用ng zorro antd的三种方式
在新版本的angular中使用新的ng zorro,按照官方文档一步一步来,没有报错,但是也没有反应. 试了一下官方的两种方式,第一种方式如果使用cnpm会报错,第二种方式会没有反应,也是因为使用了c ...
angular项目集成ng zorro 和ng alain
angular项目集成 ng zorro和ng alain(mock 和acl权限)学习笔记这段时间,比较忙,很久没有写博客了.作为后端开发人员,第一次接触angular,以下是个人的学习心得和D ...
angular ng zorro框架日期框无法自适应宽度的解决方法
如果我们使用ng zorro框架的日期框时,就会发现,日期框的宽度总是固定的,无法像输入框一样自适应父节点<nz-form-control [nzSpan]="12"> ...
NG ZORRO知识点总结
NG ZORRO的常用属性,包括但不限于,结合代码 <button nz-button [nzType]="'primary'" [nzSize]="'large' ...
ngzorro html源码,angular使用NG ZORRO来构建博客展示项目(简单实现展示页面)
使用 NG ZORRO 在上一篇文章中,我们已经安装了NG ZORRO,并在跟模块中引入了,在子模块中使用还需要再次引入. 编辑layout模块中的header组件在layout.module.ts ...
前端框架 ng 环境配置
一.安装 nvm 版本管理工具 nvm 英文全称 node.js version management,是一个 nodejs 的版本管理工具.目的是解决 node.js 各种版本存在不兼容现象,并且可 ...
ng zorro input readonly 的使用
网上找了好久才找到的方法, 方法一(在构造方法里做): js: isDisabled = true validateForm: FormGroup; constructor( priva ...
kie-api_KIE-WB / JBPM控制台Ng –配置
kie-api 大家好,这是我上一篇文章中有关如何使用jBPM Console的后续文章 . 这篇文章的主要思想是描述为了在您自己的公司中使用jBPM Console NG而需要进行的一些最常见的配置 ...
KIE-WB / JBPM控制台Ng –配置
大家好,这是我上一篇文章中有关如何使用jBPM Console的后续文章 . 这篇文章的主要思想是描述为了在您自己的公司中使用它,您需要对jBPM Console NG进行一些最常见的配置. 但是在讨 ...

Ng Zorro配置

Ng Zorro配置

文章目录

一、app.module里配置

二、引入样式

1.使用全部组件样式

2.引入组件模块

Ng Zorro配置相关推荐

最新文章

热门文章