ng-zorro-antd 是 Ant Design 设计语言在 Angular 框架下的实现，提供了一系列符合 Ant Design 风格的组件和指令，方便前端开发人员快速搭建符合设计规范的界面。本文旨在介绍 ng-zorro-antd 的应用及其在 Angular 项目中的实际运用。
安装
使用 npm 安装 ng-zorro-antd：
npm install ng-zorro-antd --save
引入样式
在 styles.scss 中引入 Ant Design 样式：
@import '~ng-zorro-antd/style/index.css';
使用组件
在需要使用组件的模块中，import 所需组件：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - -------------- - ---- -----------------------
------ - ------------- - ---- ----------------------
------ - ------------ - ---- ---------------------
-----
-----------
-------- -
---------------
--------------
-------------
-----
--
------------- -
-----
--
--
------ ----- -------- --示例
Button 按钮
<button nz-button nzType="primary">Primary Button</button> <button nz-button nzType="dashed">Dashed Button</button> <button nz-button nzType="text">Text Button</button> <button nz-button nzType="link">Link Button</button>
Form 表单
-- -------------------- ---- -------
----- ------- -------------------
--------------
-----------------------------------
-----------------
------ -------- ---------------------- --
------------------
---------------
--------------
------------------------------------
-----------------
------ -------- ----------------------- --
------------------
---------------
--------------
---------- ---------------- --------------------------------------------
---------------
-------Table 表格
-- -------------------- ---- -------
------ - --------- - ---- ----------------
--------- -------- -
----- -------
---- -------
-------- -------
-
------------
--------- ---------------
--------- -
------ -------- ----------------
-------
----
-------------
------------
----------------
-----
--------
-------
--- ----------- ---- -- ------
------ --------- -------
------ -------- -------
------ ------------ -------
-----
--------
--------
--
--
------ ----- ----------- -
----- ---------- - -
- ----- ----- ----- ---- --- -------- ---- ----- --
- ----- ----- ----- ---- --- -------- -------- --
-----
--
-总结
ng-zorro-antd 提供了一系列符合 Ant Design 风格的组件和指令，可以帮助开发人员快速搭建符合设计规范的界面。对于使用 Angular 框架开发网站的开发人员来说，ng-zorro-antd 是一个值得推荐的工具。在实际使用中，需要注意版本兼容性以及各组件的参数配置与使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a0d2b048841e9894d1aa25