ng6-ant 是一个基于 Angular 6 的 UI 组件库，提供了一系列常用的 UI 组件并且支持自定义主题，可以大幅度加速前端开发的速度。本篇文章将会详细介绍 ng6-ant 的安装、使用以及自定义主题等方面的知识。
安装
安装 ng6-ant 相当简单，只需要在项目的根目录下使用 npm 安装即可。具体命令如下：
--- ------- ------- ------
使用
ng6-ant 的使用也非常简单，我们只需要在 app.module.ts 文件中引入需要的模块即可开始使用相应的组件。例如，我们需要使用按钮组件，我们只需要在 app.module.ts 文件中添加如下代码：
------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ---------- ------ - ------------ - ---- ------------------ ----------- ------------- - ------------ -- -------- - -------------- ------------ -- ---------- - ------------ - -- ------ ----- --------- - -
然后在 HTML 模板中使用 nz-button 标签即可插入按钮组件。代码示例如下：
------- --------- ------------------------ ---------------
自定义主题
ng6-ant 默认提供了多种主题，如果我们需要自定义自己的主题也非常简单。我们只需要创建一个 custom-theme.scss 文件，然后在 angular.json 文件中配置即可。具体步骤如下：
- 创建 custom-theme.scss 文件，并在其中定义自己的主题变量，例如我们想修改 primary 色值，我们只需要添加以下代码：
--------------- --------
- 修改 angular.json 文件中的 styles 配置，将 custom-theme.scss 文件的路径加入即可。具体代码如下：
--------- -
------------------
-----------------------
--- 在项目中引用主题即可，例如我们需要使用自定义的 primary 色值，我们只需要在样式表中使用 $primary-color 变量即可。代码示例如下：
------ - ----------------- --------------- -
示例代码
-- ------------- -- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ---------- ------ - ------------ - ---- ------------------ ----------- ------------- - ------------ -- -------- - -------------- ------------ -- ---------- - ------------ - -- ------ ----- --------- - -
---- ------------------ -- --- ------- --------- ------------------------ ---------------
-- ----------------- -- --------------- --------
以上就是对于 ng6-ant 使用教程的详细介绍，相信大家已经可以轻松的使用 ng6-ant 来加速自己的开发工作了。同时，自定义主题也是非常方便的，让我们可以更加灵活的控制 UI 组件的外观。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600672e20520b171f02e1d3f