当前位置：首页 > 软件库 > Web应用开发 > Web框架 >

ng-zorro-antd

Angular UI Component Library based on Ant Design

授权协议 MIT License

开发语言 JavaScript

所属分类 Web应用开发、 Web框架

软件类型开源软件

地区不详

投递者彭霄

操作系统跨平台

开源组织无

适用人群未知

软件概览

NG-ZORRO

An enterprise-class Angular UI component library based on Ant Design.

English | 简体中文

✨ Features

An enterprise-class UI design system for Angular applications.
60+ high-quality Angular components out of the box.
Written in TypeScript with predictable static types.
The whole package of development and design resources and tools.
Support OnPush mode, high performance.
Powerful theme customization in every detail.
Internationalization support for dozens of languages.

☀️ License

MIT

�� Environment Support

Angular ^12.0.0
Server-side Rendering
Modern browsers and Internet Explorer 11+ (with polyfills)
Electron

IE / Edge	Firefox	Chrome	Safari	Opera	Electron
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions

�� Design Specification

ng-zorro-antd synchronizes design specification with Ant Design on a regular basis, you can check the log online.

�� Installation

We recommend using @angular/cli to install. It not only makes development easier, but also allows you to take advantage of the rich ecosystem of angular packages and tooling.

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

More information about @angular/cli here.

You can also install ng-zorro-antd with npm or yarn

$ npm install ng-zorro-antd

�� Usage

Import the component modules you want to use into your app.module.ts file and feature modules.

import { NzButtonModule } from 'ng-zorro-antd/button';

@NgModule({
  imports: [ NzButtonModule ]
})
export class AppModule {
}

@angular/cli users won't have to worry about the things below but it's good to know.

And import style and SVG icon assets file link in angular.json.

{
  "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"
  ]
}

See Getting Started for more details.

�� Links

⌨️ Development

$ git clone git@github.com:NG-ZORRO/ng-zorro-antd.git
$ cd ng-zorro-antd
$ npm install
$ npm run start

Browser would open automatically.

�� Contributing

We welcome all contributions. Please read our CONTRIBUTING.md first. You can submit any ideas as pull requests or as GitHub issues.

If you're new to posting issues, we ask that you read How To Ask Questions The Smart Way (This guide does not provide actual support services for this project!), How to Ask a Question in Open Source Community and How to Report Bugs Effectively prior to posting. Well written bug reports help us help you!

Thanks to JetBrains for supporting us free open source licenses.

❓ Help from the Community

For questions on how to use ng-zorro-antd, please post questions to using the ng-zorro-antd tag. If you're not finding what you need on stackoverflow, you can find us on as well.

As always, we encourage experienced users to help those who are not familiar with ng-zorro-antd!

�� Users

We list some users here, if your company or product uses NG-ZORRO, let us know here!

Love ng-zorro-antd? Give our repo a star ⭐ ⬆️ .

使用案例

Angular5安装ng-zorro-antd

1. 安装脚手架工具# 使用 @angular/cli 前，务必确认 Node.js 已经升级到 v8.10 或以上，强烈建议升级至最新版本的 @angular/cli。 $ npm install -g @angular/cli@latest 请注意：由于 0.7.0 版本的 ng-zorro-antd 目前尚未正式支持 angular 6.0 版本，@angular/cli 请选择 1.7
前端知识之angular组件库之NG-ZORRO-ANTD结构窥探（二）components

ng-zorro-antd 结构窥探（二） Config 系统中的组件与配置都在config中通过config.ts声明了各种类型的config类型 export interface NzConfig { affix?: AffixConfig; select?: SelectConfig; alert?: AlertConfig; anchor?: AnchorConfig;
前端知识之angular组件库之NG-ZORRO-ANTD结构窥探（一）components

ng-zorro-antd 结构窥探项目目录结构 cdk Component Development Kit The Component Dev Kit (CDK) is a set of behavior primitives for building UI components. 参考链接 1.angualr material ui components 存放组件以及命令的目录 Core 项
ng-zorro-antd0.5x升级到1.8.1或者更高（当前最新9.3.0）

ng-zorro-antd0.5x升级到1.8.1或者更高（当前最新9.3.0） package.json文件直接更改版本号 - "ng-zorro-antd": "^0.6.15", +"ng-zorro-antd": "^1.8.1", 安装 npm install 成功升级之后需要按报错依次更改代码，大概有以下几种（不全，仅供参考）：所有常量属性不用变量表示方法 - [nzSiz
使用npm指令卸载安装指定版本的ng-zorro-antd

卸载： npm uninstall ng-zorro-antd 安装指定版本： npm install ng-zorro-antd@1.8.1 --save
如何更好使用 ng-zorro-antd 图标

自 ng-zorro-antd 1.7.x 以后图标发生破坏性变更，虽然带了诸多优势，同时也带来几个劣势：若采用动态加载会产生额外的HTTP请求若静态加载需要逐一注册图标 st 组件的 format 参数无法直接指定图标 ng-alain 默认使用静态加载的做法，毕竟后端使用图标相对于比较有限，即使将 svg 都打包进脚本相比较之前整个 styles 体积上是所有减少，但比较并不多。而针对以
使用angular 6 +ng-zorro-antd中的 Form表单控制台报错

错误代码： Uncaught Error: Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'. (" <form nz-form [ERROR ->][formGroup]="validateForm" class="login-form" (ngSubmit
Angular7 ng-zorro-antd 制作右键菜单

没多少逻辑，就直接贴代码了下面是html模板的代码： <ul nz-menu [style.width]="300" [nzTheme]="'dark'" [nzMode]="'inline'" [nzInlineCollapsed]="isCollapsed"> <li nz-menu-item (contextmenu)="contextMenu($even
前端知识之angular组件库之NG-ZORRO-ANTD结构窥探（三）pipe ,polify,service

ng-zorro-antd 结构窥探（三） pipe 新增加了一个time-range的管道 import { Pipe, PipeTransform } from '@angular/core'; import { timeUnits } from 'ng-zorro-antd/core/time'; import { padStart } from 'ng-zorro-antd/core/ut
【ng-zorro-antd】cai坑记录

样式不生效：解决方案：在style.css中引入 'node_modules/ng-zorro-antd/ng-zorro-antd.min.css'; ngModel报错：解决方案：在sharedModule中引入FormsModule，ReactiveFormsModule 支持less：安装less：npm i less --save-dev angular.json: style
《Angular--ng-zorro-antd---table筛选数据无法正常显示》

前言： the best way out is always through 正文：问题场景根据ng-zorro-antd的table,新增筛选功能,nameList按照组件库是直接初始化数据的: nameList = [ { text: 'Joe', value: 'Joe' }, { text: 'Jim', value: 'Jim' } ];