阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      ng-zorro-antd 教程

      NG-ZORRO

      ✨ 特性

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

      🖥 支持环境

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

      浏览器会自动打开。

      🗺 Road Map

      查看 这个 issue 来了解我们 2019 年的开发计划。

      🤝 如何贡献

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

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

      ❓ 社区互助

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

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

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

      🎉 谁在使用

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

      ☀️ 授权协议

      MIT

      目录
      目录