NG-ZORRO - Ant Design 的 Angular 实现


MIT
跨平台
TypeScript

软件简介

NG-ZORRO

Ant Design 的 Angular 实现,开发和服务于企业级后台产品。

Travis
branch
Codecov GitHub Release
Date npm
package NPM
downloads GitHub
license
Gitter extension-for-
VSCode
Twitter

✨ 特性

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

🖥 支持环境

  • Angular ^8.0.0
  • 支持服务端渲染
  • 现代浏览器,以及 Internet Explorer 11+ (使用 polyfills
  • Electron
[![](/static/assets/osapp/images/03dd6ff5f84af62a7f938a315550b96a.png)](http://godban.github.io/browsers- support-badges/) IE / Edge [![Firefox](https://raw.githubusercontent.com/alrra/browser- logos/master/src/firefox/firefox_48x48.png)](http://godban.github.io/browsers- support-badges/) Firefox [![Chrome](https://raw.githubusercontent.com/alrra/browser- logos/master/src/chrome/chrome_48x48.png)](http://godban.github.io/browsers- support-badges/) Chrome [![Safari](https://raw.githubusercontent.com/alrra/browser- logos/master/src/safari/safari_48x48.png)](http://godban.github.io/browsers- support-badges/) Safari [![Opera](https://raw.githubusercontent.com/alrra/browser- logos/master/src/opera/opera_48x48.png)](http://godban.github.io/browsers- support-badges/) Opera [![Electron](https://raw.githubusercontent.com/alrra/browser- logos/master/src/electron/electron_48x48.png)](http://godban.github.io/browsers- support-badges/) Electron
IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions last 2 versions

由于 @angular/cdk 的缘故,ng-zorro-antd 支持主要浏览器的最新两个主版本。

🎨 设计规范

ng-zorro-antd 与 Ant Design 设计规范定期同步,你可以在线查看同步日志

📦 安装

我们强烈推荐官方的 @angular/cli 工具链辅助进行开发,在实际项目开发中,它可以很好的满足对 TypeScript
代码的构建、调试、代理、打包部署等一系列工程化的需求。

$ ng new PROJECT_NAME
$ cd PROJECT_NAME
$ ng add ng-zorro-antd

如果你想了解更多CLI工具链的功能和命令,建议访问 Angular CLI 了解更多

🔨 使用

在每一个需要使用组件的 module 中引入 NgZorroAntdModule

import { NgZorroAntdModule } from 'ng-zorro-antd';

@NgModule({
  imports: [ NgZorroAntdModule ]
})
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 site:start

浏览器会自动打开。