NG-ZORRO 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
NG-ZORRO 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: MIT
操作系统: 跨平台
开发厂商: 阿里巴巴
收录时间: 2017-08-16
提 交 者: 局长

 

NG-ZORRO

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

 特性

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

☀️ 授权协议

MIT

🖥 支持环境

  • Angular ^10.0.0 
  • 支持服务端渲染
  • 现代浏览器,以及 Internet Explorer 11+ (使用 polyfills
  • Electron
IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
Electron
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

浏览器会自动打开。

🤝 如何贡献

PRs Welcome

在任何形式的参与前,请先阅读 贡献者文档。如果你希望参与贡献,欢迎 Pull Request,或给我们 报告 Bug

强烈推荐阅读 《提问的智慧》(本指南不提供此项目的实际支持服务!)、《如何向开源社区提问题》  《如何有效地报告 Bug》《如何向开源项目提交无法解答的问题》,更好的问题更容易获得帮助。

感谢 JetBrains 提供的免费开源 License 赞助

JetBrains

 社区互助

如果您在使用的过程中碰到问题,可以通过下面几个途径寻求帮助,同时我们也鼓励资深用户通过下面的途径给新人提供帮助。

通过 Stack Overflow 或者 Segment Fault 提问时,建议加上 ng-zorro-antd 标签。

  1. Stack Overflow(English)
  2. Segment Fault(中文)
  3. Gitter
  4. 加入钉钉 NG-ZORRO 自助服务群(中文)
展开阅读全文

代码

NG-ZORRO 的相关博客

ng-zorro-antd初始化

$ ng new PROJECT_NAME $ cd PROJECT_NAME $ ng add ng-zorro-antd 上面的命令尽量在cmd下执行, 参考教学视频:https://nin...

NG-ZORRO开发环境搭建

搭建基于NG-ZORROR的开发脚手架

TimePicker - NG-ZORRO设置

前言 依照官方例子,要给nz-time-picker组件设置某些时间范围不能选择。 正文 根据列表里设置的开始时间与结束时间,去限制弹...

NG-ZORRO如何修改样式?

css修改:无效 .ant-input-affix-wrapper .ant-input:not(:first-child){ padding-left: 30px; } 1 2 3 修改上面就正常了 :h...

ng-zorro-antd@0.6.15: 低于0.7.0版本 ng-zorro-antd 已经不再维 护,怎么调整?

npm WARN deprecated ng-zorro-antd@0.6.15: 低于0.7.0版本 ng-zorro-antd 已经不再维 护,请尽快升级至最新版本https://ng....

ng-zorro-antd V0.6~V0.7 升级指南

NG-ZORRO-ANTD v0.7升级指南 官方写给0.6.x 版本用户 CHANGELOG 如何升级 npm install ng-zorro-antd@0.7.0 命令即可升级至 ...

ng-zorro等组件默认样式的修改

https://www.jianshu.com/p/8b887c2aac06 在项目中修改ng-zorro组件默认样式的一些方法: 类名等 前加::ng-deep; 类名等 前加...

ng-zorro-antd中踩过的坑

ng-zorro-antd中踩过的坑 前端项目中,我们经常会使用阿里开源的组件库:ant-design,其提供的组件已经足以满足多数的需求,拿...

ng-zorro-mobile中遇到的问题

一、Modal(弹出框)使用上的问题 在官方文档中,Modal是这样使用的: 这里需要注意的一点就是,看到上方代码中只用了Modal的全...

NG-ZORRO 的相关问答

评论 (25)

加载中
前端都不需要懂oop的么?那写出来的代码个shi有什么区别,一个ng把这些人难成这样
2019/06/07 08:04
回复
举报
脚本功能只是其一了…
2018/06/26 12:01
回复
举报
现在的新框架,入门门槛基本没有,会前端的,1天就能开始正式开发,只有碰到优化和及其少数的情况才需要去看原理和源码
2018/01/03 08:55
回复
举报
非常好用
2017/10/10 18:27
回复
举报
留一个阿里云免费优惠券->http://izhuanyer.com
2017/09/28 05:30
回复
举报
听说只有老的,不愿进步的码农才会说:要什么angular要什么react要什么vue,我们jquary不很好吗??? 啥,大清都亡了。sb
2017/09/06 18:47
回复
举报
我才不告诉你我有阿里云优惠卷->http://izhuanyer.top
2017/09/01 14:00
回复
举报
我只想说,阿里的轮子,方
2017/08/29 08:46
回复
举报
不清楚大家都是考虑,我一直坚持,那些相对原始的东西弄个好了,再根据具体需要选择往上的东西。
2017/08/25 18:02
回复
举报
nz-form报错怎么回事啊,就官网上的代码贴进来的Can't bind to 'formGroup' since it isn't a known property of 'form'.
2017/08/25 17:34
回复
举报
更多评论
25 评论
191 收藏
分享
返回顶部
顶部