ng-zorro-antd 是 Ant Design 的 Angular 实现，主要用于研发企业级中后台产品。全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。
✨ 特性
- 提炼自企业级中后台产品的交互语言和视觉风格。
- 开箱即用的高质量 Angular 组件，与 Angular 保持同步升级。
- 使用 TypeScript 构建，提供完整的类型定义文件。
- 支持 OnPush 模式，性能卓越。
- 数十个国际化语言支持。
- 深入每个细节的主题定制能力。
☀️ 授权协议
�� 支持环境
IE / Edge |
Firefox |
Chrome |
Safari |
Opera |
Electron |
|---|---|---|---|---|---|
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
�� 设计规范
ng-zorro-antd 与 Ant Design 设计规范定期同步，你可以在线查看同步日志。
�� 安装
我们强烈推荐官方的 @angular/cli 工具链辅助进行开发，在实际项目开发中，它可以很好的满足对 TypeScript 代码的构建、调试、代理、打包部署等一系列工程化的需求。
$ ng new PROJECT_NAME
$ cd PROJECT_NAME
$ ng add ng-zorro-antd
如果你想了解更多CLI工具链的功能和命令，建议访问 Angular CLI 了解更多
�� 使用
将想要使用的组件模块引入到你的 app.module.ts 文件和其它的特性模块中。
import { NzButtonModule } from 'ng-zorro-antd/button'; @NgModule({ imports: [ NzButtonModule ] }) export class AppModule { }
@angular/cli的用户不需要担心下面这项设置，但知道也挺有好处。
然后在 angular.json 文件中引入样式和 SVG icon 资源。
{
"assets": [
+ {
+ "glob": "**/*",
+ "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
+ "output": "/assets/"
+ }
],
"styles": [
+ "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
]
}
参考快速上手以了解更多。
�� 链接
⌨️ 开发
$ git clone git@github.com:NG-ZORRO/ng-zorro-antd.git
$ cd ng-zorro-antd
$ npm install
$ npm run start
浏览器会自动打开。
�� 如何贡献
在任何形式的参与前，请先阅读 贡献者文档。如果你希望参与贡献，欢迎 Pull Request，或给我们 报告 Bug。
强烈推荐阅读 《提问的智慧》(本指南不提供此项目的实际支持服务！)、《如何向开源社区提问题》 和 《如何有效地报告 Bug》、《如何向开源项目提交无法解答的问题》，更好的问题更容易获得帮助。
感谢 JetBrains 提供的免费开源 License 赞助
❓ 社区互助
如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。
通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 ng-zorro-antd 标签。
- Stack Overflow（English）
- Segment Fault（中文）
-
NG ZORRO的常用属性,包括但不限于,结合代码 <button nz-button [nzType]="'primary'" [nzSize]="'large'" [nzLoading]="loading" [nzDisabled]="disabled" (click)="onClick()">点击我</button> nz-button是一个按钮组件，它有多个常用属性，如：nzType，n
-
为AntDesign的Table组件(树形数据)添加Checkbox（NG-ZORRO） 有点费解，为啥Ant-Design基于React和Vue的Table组件都有为树形数据表格添加checkbox的示例，但是基于Angular的Ng-Zorro却没有。 还是搞Angular的人太少啊，网上搜也搜不到类似的文章。大多数都是vue | react。 所以，我还是自己写个，也顺带理一下思路和逻辑。
-
第一步 Ts中引入EchartsOption import { EChartsOption } from 'echarts'; 第二步 声明Echarts数据源 这部分可以直接去Echats复制过来，选择自己需要的数据源 链接: Echarts官网实例 public outputOptions: EChartsOption = { tooltip: {}, dataset: {
-
1. 官方文档上给的是英文的引用，所以需要改成中文的 app.module zh_CN ，zh import { registerLocaleData } from '@angular/common'; import zh from '@angular/common/locales/zh'; registerLocaleData(zh); import { NZ_I18N } fr
-
1.angular.json中引入 "assets": [ "src/favicon.ico", "src/assets", { "glob": "**/*", "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/", "output"
-
前阵子在公司实习学习中，接触到了ng-zorro-antd这个组件库，用它来做了一些业务上的内容。方便好用是不需要说的了，但是有时候需要修改它自身的样式，为的是能和其它组件能够统一美观。 这里总结一下修改ng-zorro-antd组件自身样式的几种方法，供需要时查阅参考。 方法总结： 类名等 前加 ::ng-deep 类名等 前加 :root 类名等 前加 :host /deep/
-
安装ng zorro组件 npm install ng-zorro-antd --save 导入模块 import { NgZorroAntdModule } from 'ng-zorro-antd'; imports: [ BrowserModule, NgZorroAntdModule ], 引入样式 styles.css @import "../node_modu
-
Ng-zorro组件Table样式修改笔记 由于 Ng-zorro组件样式修改复杂，为了以后高效开发，记录一下，相关代码如下 /* 表头样式 */ .table /deep/ .ant-table-thead>tr>th { text-align: center; background: #30494d; color: #ffffff; padding: 0.8%; borde
-
本文向大家介绍angular ng-repeat数组中的数组实例，包括了angular ng-repeat数组中的数组实例的使用技巧和注意事项，需要的朋友参考一下 //先定义一个数组 anular代码： html 代码： track by $index 在有重复值时需加上这段代码 不然浏览器会报这个错 Error: [ngRepeat:dupes]并且不会渲染到页面 以上这篇angular ng
-
问题内容： 我如何获得Angular的指令以按每个项目的实际值而不是按每个项目的属性值对列表进行排序？ 例如： 这是一个玩弄的小提琴：http : //jsbin.com/okatur/1/edit 我意识到我可以在阵列上做，但这是我唯一的选择吗？ 问题答案： 从1.3.0-rc.5开始 从AngularJS 1.3.0-rc.5开始 ，如果未提供其他参数，则过滤器（请参阅文档）将使用其项目自动对
-
我已经开发了应用程序使用离子框架来显示客户当前的市场价格。我有问题在角js条件类与ng-重复循环。当市场发生变化时，我需要显示高（绿色）和低（红色）颜色，如果没有变化，以前的颜色应该为div显示，我使用了下面的代码查看 控制器： CSS 对于每一秒的速率将得到更新，所以若速率变得很高，那个么之前的速率应该应用css类。评分高颜色如果低意味着应用css类。rate highcolor else表示它
-
本文向大家介绍angular基于ng-alain定义自己的select组件示例，包括了angular基于ng-alain定义自己的select组件示例的使用技巧和注意事项，需要的朋友参考一下 1、首先是my-select2.component.html页面,这里是在ng-alain的select基础上根据业务需求添加新的功能;代码如下： 2、再者是my-select2.component.ts页面
-
任何Angular 2应用程序的核心理念是组件。实际上，整个应用程序可以被建模为这些组件的树。 在Angular1.x中，我们有路由器视图和指令，其工作类似于组件。指令组件的想法变得相当受欢迎。它们是通过使用控制器的指令创建的，同时依赖于controllerAs和bindToController属性。例如：
-
我正在尝试将type-ahead http示例添加到我的项目（ng-bootstrap）中。我只是简单地复制了typeahead-http、html和typescript文件。然后我更改了app.module.ts以包含ahead文件类型： 我已经将NgbdTypeaheadHttp添加到声明列表中，并将WikipediaService添加到提供程序中，但我仍然得到以下错误： 异常：调用节点模块失
-
从 /core 引入 Component 装饰器 在 中 ，设置selector、template 和 styles 等元数据 template （模板）：HTML的一种形式，它告诉Angular如何呈现这个组件。下面的组件会将name变量的值插入到双括号之间的模板中，在视图中呈现的是。 要使用这个组件，我们只需添加到我们的HTML，Angular将插入这些标签之间的视图的实例。 查看示例
-
问题内容： 嘿，我有这段代码： 它可以工作，但是我想在循环中添加一些额外的条件，例如： 我怎样才能做到这一点？ 问题答案： 使用（或）： 附加到元素，这将决定是否显示它。 ng- if的 文档可以在此处找到。 但是，如果只想在循环第一个或最后一个项目时执行某项操作，则也可以使用和的属性。这些已用ng- repeat记录 。可以这样使用：