NG-ZORROAnt Design 的 Angular 組件庫
ng-zorro-antd 是 Ant Design 的 Angular 實現(xiàn)，主要用于研發(fā)企業(yè)級中后臺產(chǎn)品。全部代碼開源并遵循 MIT 協(xié)議，任何企業(yè)、組織及個人均可免費使用。
? 特性
- 提煉自企業(yè)級中后臺產(chǎn)品的交互語言和視覺風(fēng)格。
- 開箱即用的高質(zhì)量 Angular 組件，與 Angular 保持同步升級。
- 使用 TypeScript 構(gòu)建，提供完整的類型定義文件。
- 支持 OnPush 模式，性能卓越。
- 數(shù)十個國際化語言支持。
- 深入每個細節(jié)的主題定制能力。
?? 授權(quán)協(xié)議
?? 支持環(huán)境
| IE / Edge |
Firefox |
Chrome |
Safari |
Opera |
Electron |
|---|---|---|---|---|---|
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
?? 設(shè)計規(guī)范
ng-zorro-antd 與 Ant Design 設(shè)計規(guī)范定期同步，你可以在線查看同步日志。
?? 安裝
我們強烈推薦官方的 @angular/cli 工具鏈輔助進行開發(fā)，在實際項目開發(fā)中，它可以很好的滿足對 TypeScript 代碼的構(gòu)建、調(diào)試、代理、打包部署等一系列工程化的需求。
$ 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的用戶不需要擔(dān)心下面這項設(shè)置，但知道也挺有好處。
然后在 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"
]
}
參考快速上手以了解更多。
?? 鏈接
?? 開發(fā)
$ git clone [email protected]:NG-ZORRO/ng-zorro-antd.git $ cd ng-zorro-antd $ npm install $ npm run start
瀏覽器會自動打開。
?? 如何貢獻
在任何形式的參與前，請先閱讀 貢獻者文檔。如果你希望參與貢獻，歡迎 Pull Request，或給我們 報告 Bug。
強烈推薦閱讀 《提問的智慧》(本指南不提供此項目的實際支持服務(wù)！)、《如何向開源社區(qū)提問題》 和 《如何有效地報告 Bug》、《如何向開源項目提交無法解答的問題》，更好的問題更容易獲得幫助。
感謝 JetBrains 提供的免費開源 License 贊助
? 社區(qū)互助
如果您在使用的過程中碰到問題，可以通過下面幾個途徑尋求幫助，同時我們也鼓勵資深用戶通過下面的途徑給新人提供幫助。
通過 Stack Overflow 或者 Segment Fault 提問時，建議加上 ng-zorro-antd 標簽。
- Stack Overflow（English）
- Segment Fault（中文）