NG-ZORROAnt Design 的 Angular 組件庫
ng-zorro-antd 是 Ant Design 的 Angular 實(shí)現(xiàn)，主要用于研發(fā)企業(yè)級(jí)中后臺(tái)產(chǎn)品。全部代碼開源并遵循 MIT 協(xié)議，任何企業(yè)、組織及個(gè)人均可免費(fèi)使用。
? 特性
- 提煉自企業(yè)級(jí)中后臺(tái)產(chǎn)品的交互語言和視覺風(fēng)格。
- 開箱即用的高質(zhì)量 Angular 組件，與 Angular 保持同步升級(jí)。
- 使用 TypeScript 構(gòu)建，提供完整的類型定義文件。
- 支持 OnPush 模式，性能卓越。
- 數(shù)十個(gè)國際化語言支持。
- 深入每個(gè)細(xì)節(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è)計(jì)規(guī)范
ng-zorro-antd 與 Ant Design 設(shè)計(jì)規(guī)范定期同步，你可以在線查看同步日志。
?? 安裝
我們強(qiáng)烈推薦官方的 @angular/cli 工具鏈輔助進(jìn)行開發(fā)，在實(shí)際項(xiàng)目開發(fā)中，它可以很好的滿足對(duì) 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)心下面這項(xiàng)設(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
瀏覽器會(huì)自動(dòng)打開。
?? 如何貢獻(xiàn)
在任何形式的參與前，請(qǐng)先閱讀 貢獻(xiàn)者文檔。如果你希望參與貢獻(xiàn)，歡迎 Pull Request，或給我們 報(bào)告 Bug。
強(qiáng)烈推薦閱讀 《提問的智慧》(本指南不提供此項(xiàng)目的實(shí)際支持服務(wù)！)、《如何向開源社區(qū)提問題》 和 《如何有效地報(bào)告 Bug》、《如何向開源項(xiàng)目提交無法解答的問題》，更好的問題更容易獲得幫助。
感謝 JetBrains 提供的免費(fèi)開源 License 贊助
? 社區(qū)互助
如果您在使用的過程中碰到問題，可以通過下面幾個(gè)途徑尋求幫助，同時(shí)我們也鼓勵(lì)資深用戶通過下面的途徑給新人提供幫助。
通過 Stack Overflow 或者 Segment Fault 提問時(shí)，建議加上 ng-zorro-antd 標(biāo)簽。
- Stack Overflow（English）
- Segment Fault（中文）