1. Angular–UI框架Antd组件库介绍&安装&使用

---

1.1 介绍:

ng-zorro-antd是 Ant Design 的 Angular 实现，主要用于研发企业级后台产品，Ant Design是蚂蚁金服 Ant Design团队开发的一款优秀的前端框UI库架支持React、Angular、Vue。

Ant Design 官网

---

1.2 Angular U框架Ng-Zorro安装使用

1.2.1创建项目安装 ng-zorro-antd

提示：安装前建议安装最新版本的 yarn

创建三部曲

ng new PROJECT_NAME # 1.创建angular项目
cd PROJECT_NAME # 2. 进入angular项目
ng add ng-zorro-antd  # 3. 安装 ng-zorro-antd

1. 创建angular项目

2. 进入angular项目

3. 安装 ng-zorro-antd

---

1.2.2 测试

ng serve --open

出现以下页面代表成功

---

1.3 在项目中使用组件库

---

1.3.1 打开Ant Design 官网

打开 Ant Design 官网

---

1.3.2 选择要使用的组件

1.3.3 引入&配置模块

import { NzStepsModule } from 'ng-zorro-antd/steps';
  imports: [
    NzStepsModule,
  ],

1.3.3 复制示例代码

---

1.3.4 粘贴代码到要使用的地方

我这里是粘贴到根组件的html文件中

<nz-steps>
  <nz-step nzTitle="Login" nzStatus="finish" nzIcon="user"></nz-step>
  <nz-step nzTitle="Verification" nzStatus="finish" nzIcon="solution"></nz-step>
  <nz-step nzTitle="Pay" nzStatus="process" nzIcon="loading"></nz-step>
  <nz-step nzTitle="Done" nzStatus="wait" [nzIcon]="iconTemplate"></nz-step>
  <ng-template #iconTemplate><i nz-icon nzType="smile"></i></ng-template>
</nz-steps>

---

1.3.4 打开游览器 测试

---

1.4 如果组件中使用了icon的,需要在根组件中引入icon模块

引入&配置模块

import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzIconModule } from 'ng-zorro-antd/icon';
  imports: [
    NzStepsModule,
    NzIconModule,
  ],

我这里是粘贴到根组件的html文件中

<button nz-button nzType="primary" nzShape="circle"><i nz-icon nzType="search"></i></button>
<button nz-button nzType="primary" nzShape="circle">A</button>
<button nz-button nzType="primary"><i nz-icon nzType="search"></i>Search</button>
<button nz-button nzType="default" nzShape="circle"><i nz-icon nzType="search"></i></button>
<button nz-button nzType="default"><i nz-icon nzType="search"></i>Search</button>
<br />
<button nz-button nzType="default" nzShape="circle"><i nz-icon nzType="search"></i></button>
<button nz-button nzType="default"><i nz-icon nzType="search"></i>Search</button>
<button nz-button nzType="dashed" nzShape="circle"><i nz-icon nzType="search"></i></button>
<button nz-button nzType="dashed"><i nz-icon nzType="search"></i>Search</button>

演示:

---

1.5 可以自己去更改组件的样式

示例:

1.5.1 导入&配置模块

import { NzIconModule} from 'ng-zorro-antd/button';
  imports: [
    NzIconModule,
  ],

---

1.5.2 复制相关代码

---

1.5.3 粘贴相关代码

我这里是粘贴到根组件的html文件中

<i nz-icon nzType="heat-map" nzTheme="outline"></i>

---

1.5.4 运行结果:

---

1.5.3 更改组件样式

appcomponent.html

<i nz-icon nzType="heat-map" nzTheme="outline" class="heat-map"></i>

appcomponent.css

.heat-map {
  font-size: 64px;
  color: orange;
}

运行结果:

---

---