简介
@csdp/ng-zorro-antd 是一个基于 Angular 框架的 UI 组件库，提供了许多易于使用、美观并且高度可配置的 UI 组件，为前端开发人员提供了快速构建复杂应用程序的工具。
安装
在本地项目中安装 @csdp/ng-zorro-antd 依赖项，需要使用 npm 命令：
npm install @csdp/ng-zorro-antd --save
使用
导入待使用的组件，或使用全部组件，只需要导入 NzModule：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - -------- - ---- ----------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
--------
--
---------- ---
---------- --------------
--
------ ----- --------- - -之后，可以在 HTML 模板中使用组件：
<nz-button nzType="primary">点击这个按钮</nz-button>
深入了解
组件 API
@csdp/ng-zorro-antd 中的每个组件都提供了详细的 API 文档，以及可供使用的属性和方法。在进行复杂的应用程序开发时，这些 API 文档能够帮助理解每个组件提供的功能以及如何使用这些功能。
例如，对于 NzButton 组件，可以在官方文档找到以下可配置属性：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| nzType | 'primary' | 'dashed' | 'danger' | 'default' | 'default' | 按钮类型 |
| nzShape | 'circle' | 'round' | null | null | 按钮形状 |
| nzSize | 'large' | 'default' | 'small' | 'default' | 按钮大小 |
| nzGhost | boolean | false | 是否使用 Ghost 按钮样式 |
| nzLoading | boolean | NzButtonLoadingDirective | false | 是否启用加载状态 |
| nzBlock | boolean | false | 是否为块级元素 |
| nzDanger | boolean | false | 是否为危险操作按钮 |
| nzHref | string | null | 设置 <a> 标签的 href 属性 |
国际化
@csdp/ng-zorro-antd 自带了 i18n 国际化模块，支持多种语言，可以轻松地在应用程序中使用，以达到全球化的目的。要使用 i18n 模块，只需在应用程序中像这样创建：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - -------- ----- - ---- ----------------------
------ - ------------------ - ---- ------------------
------ -- ---- -----------------------------
------ - ------------ - ---- ------------------
-----------------------
-----------
------------- -
------------
--
-------- -
--------------
--------
--
---------- -
- -------- -------- --------- -------
--
---------- --------------
--
------ ----- --------- - -主题定制
如果您需要自定义应用程序中 @csdp/ng-zorro-antd 的颜色等属性，可以通过 less 文件来实现。只需要在 Angular.json 文件中配置主题文件路径，如下：
"styles": [ "src/styles.less" ]
在您的 less 文件中，可以自由定制所需的属性，然后重新生成 CSS 文件即可。
@primary-color: #a1c4fd; @secondary-color: #c2e9fb; @import '~@csdp/ng-zorro-antd/style/ng-zorro-antd.less';
示例代码
这里是一个使用 @csdp/ng-zorro-antd 组件库的示例代码，该应用程序显示了一个表单，其中包含输入框、日期选择器、下拉菜单以及一个提交按钮。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ----------------
--------- -
---- ------------------ ------------- ------ ------- - -------
-----------------
------ -------- ------------------ --
------
---- ------------------ ------------- ------ ------- - -------
-----------------
--------------- ------------------------------------
------
---- ------------------ ------------- ------ ------- - -------
-----------------
---------- -------------------
---------- ---------------------------
---------- ---------------------------
---------- ---------------------------
---------- ---------------------------
------------
------
---- ------------------ ------------------ ---------
------- --------- ---------------- ------------------------------
------
-
--
------ ----- ----------------- -
----- -------
----- -----
----- -------
-------- -
---------------------- ---------- -----------
-
-结论
@csdp/ng-zorro-antd 是一个非常实用的前端 UI 组件库，能够协助前端开发人员快速构建高质量的 Web 应用程序。尤其是针对基于 Angular 的项目，@csdp/ng-zorro-antd 提供了高度可定制、易于使用的组件和 API，使用起来非常流畅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005665081e8991b448e2734