前言
ng6-zorro 是一个用于 Angular 6+ 应用的 UI 库，基于 Ant Design of Angular 实现。Ant Design of Angular 是 Ant Design 设计体系在 Angular 中的实现，提供了一套高质量UI 组件库。使用 ng6-zorro 可以快速构建出美观且功能强大的 Web 应用程序。
安装
使用 ng6-zorro 需要先安装 Angular，具体安装步骤可以参考 Angular 官网：https://angular.io/guide/setup-local
安装完 Angular 后，使用 npm 包管理器安装 ng6-zorro：
npm install ng6-zorro --save
使用
在使用 ng6-zorro 前，需要先将它导入到 Angular 应用程序中。
在 app.module.ts 文件中导入 NgZorroAntdModule：
-- -------------------- ---- -------
------ - ----------------- - ---- ------------
-----------
------------- -
------------
--
-------- -
--------------
---------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -组件
ng6-zorro 提供了一些常见的 UI 组件，包括按钮、输入框、表格等，以下是一些示例代码：
按钮
<button nz-button nzType="primary">Primary</button> <button nz-button nzType="dashed">Dashed</button> <button nz-button nzType="danger">Danger</button>
输入框
<nz-input-group nzSize="large"> <input nz-input [(ngModel)]="inputValue" placeholder="input here"> <nz-input-group-addon (click)="alertInputValue()"><i class="anticon anticon-search"></i></nz-input-group-addon> </nz-input-group>
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ------------
------------
--------- -----------------
--------- -
--------------- ---------------
------ -------- ------------------------ ------------------ ------
--------------------- ------------------------------ -------------- -------------------------------------------
-----------------
--
--
------ ----- ------------------ -
----------- -------
------------------- ---- ----------------- --
----------------- -
-------------------------------
-
-表格
-- -------------------- ---- -------
--------- ------ --------------- ------------------- ------------------- ---------------------------
-------
----
--- -------------------------
--------------
--- ------------------------
-----
--------
-------
--- ----------- - -- ------------
-------------------
--------------------
------------------
-----
--------
------------- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ------------
------------
--------- -----------------
--------- -
--------- ------ --------------- ------------------- ------------------- ---------------------------
-------
----
--- -------------------------
--------------
--- ------------------------
-----
--------
-------
--- ----------- - -- ------------
-------------------
--------------------
------------------
-----
--------
-----------
--
--
------ ----- ------------------ -
---- - -
-
----- ----- -----
------ -----------------------
---- ---
--
-
----- ----- -------
------ -------------------------
---- ---
--
-
----- ---- -------
------ ------------------------
---- ---
--
--
-结束语
ng6-zorro 是一个功能强大的 UI 库，适用于 Angular 6+ 应用。在使用 ng6-zorro 前，需要先安装 Angular，并将 ng6-zorro 导入到 Angular 应用程序中。本文介绍了 ng6-zorro 的一些常见组件，如果你想深入学习 ng6-zorro，可以访问它的官网：https://ng.ant.design/docs/introduce/zh。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672e20520b171f02e1d60