NG-ZORRO

ng-zorro-antd 是 Ant Design 的 Angular 实现，主要用于研发企业级中后台产品。全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。

English | 简体中文

✨ 特性

• 提炼自企业级中后台产品的交互语言和视觉风格。
• 开箱即用的高质量 Angular 组件，与 Angular 保持同步升级。
• 使用 TypeScript 构建，提供完整的类型定义文件。
• 支持 Zoneless 和 OnPush 模式，性能卓越。
• 数十个国际化语言支持。
• 深入每个细节的主题定制能力。

☀️ 授权协议

🖥 支持环境

• Angular ^21.0.0
• 支持服务端渲染
• 现代浏览器，浏览器支持
• Electron

|

Edge |

Firefox |

Chrome |

Safari |

Opera |

Electron | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | last 2 versions | 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 了解更多

🔨 使用

将想要使用的组件模块引入到你的组件中。

import { NzButtonModule } from 'ng-zorro-antd/button';

@Component({
  imports: [NzButtonModule]
})
export class AppComponent {}

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

参考快速上手以了解更多。

🔗 链接

• ng-zorro-antd-mobile
• ng-alain
• VSCode 的 snippet 扩展

⌨️ 开发

$ 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 标签。

1. Stack Overflow（English）
2. Segment Fault（中文）
3. 
4. 加入钉钉 NG-ZORRO 自助服务群（中文）

🎉 谁在使用

• 阿里巴巴
• 阿里云
• 思特沃克
• 招商银行
• 共道科技
• 优速快递
• 轻流
• 航天信息股份有限公司
• 达观数据
• Ververica
• Apache Flink
• Apache Zeppelin
• Apache Submarine
• Apache Metron
• Process Automation Group
• ScentBird
• Southern Institute of Technology
• Hapify (Dynamic boilerplates tool)

我们在这里列出了部分使用者，如果你的公司和产品使用了 NG-ZORRO，欢迎到 这里 留言。