使用角度材质主题定义您自己的构件库的配色方案

本期是Angular系列的第一篇文章，我将从其中构建Angular示例项目、组件库、主题，然后是每个组件。使它成为更通用的组件库系列，有两个目的：

1.在撰写系列文章的过程中，我不断夯实基础，不断学习填补空白；

2.分享给一些不熟悉角度和定制组件的同学，让他们快速上手，提高。

1.使用Angular CLI命令行工具生成Angular样例项目：这里添加了一个可选的参数-style=SCS，以便以后使用Angular材质的主题。完成备用订单后，将生成一个可由npm start运行的标准角度项目，其中工作空间为。/quick-pai目录。

快速样式=scss

2.因为我们要创建一个构件库，所以我们将依靠这个标准的angular sample项目的工作空间来创建一个angular library项目，并使用angular cli命令行：-prefix=x这里使用的是可选参数，后面创建构件时统一使用X前缀，比如“x-button”。执行此命令后，我们的项目结果如下：

ng g库x-控件-前缀=x

3.将主题文件夹theme添加到构件库项目中(使用了angular material的主题，但是这里没有安装完整的angular material的构件库，只是参考了使用他的主题Theme的想法。这样做的原因很明显：首先，安装它的库太大；其次，我们学习如何写角分量和主题。如果安装了，我们就不需要写这个系列了。我们先来看看棱角材质的源代码。它的源代码还是有点复杂，所以angular系列文章只会借鉴，不会复杂到它的程度。一是水平有限，二是没精力~-~)。主题文件夹截图如下：包含了core的一些非主题相关的东西，不管是做什么用的，大概都是只被组件使用，用组件的时候介绍一下就好；另外还有一个调色板文件_ palette.scss，以及一个主题助手方法文件_ _ theming.scss这个文件会定义一些函数来获取调色板中的特定颜色，定义一些主题等等；还有一个file _ all-theme . SCS，它将主题引入到组件库的组件中；还有一些预设的主题。基本上就这些了，截图如下：

4.这样一个构件库的主题框架已经搭建好了，我们可以在我们的angular sample项目中引入并使用我们的构件库，使用构件库的时候必须安装npm。这里先不考虑npm，因为我们的组件库项目依赖于这个angular sample项目，所以我们就直接介绍一下，后面我们会讲到如何打包发布npm。

4.1组件库介绍：

4.2主题文件介绍：

4.3然后就可以使用组件了。这里，以创建组件库时自动生成的组件为例。截图如下：

我们可以看到我们的组件已经成功加载，并且主题已经添加。明暗主题都在起作用，剩下的就是如何使用主题以及如何根据主题编写组件。等等，如果我们想在我们的角度示例项目中使用这些主题颜色配置，那就非常简单了！在我们的angular sample的app文件夹下还添加了一个主题文件夹，下面创建了一个新的_all-theme.scss文件。截图如下：我们可以看到app组件的主题也得到了应用，通过global定义的$theme传递到_ app-theme . SCS文件中，然后由@ include in style.scss输入，这样我们的angular sample也使用了这组主题。这里，我们使用预设的主题定义。如果预设的不符合要求，我们可以考虑如何定制一套主题颜色来满足项目的需求。我们不要在这里谈论它，而是自己思考。

好了，项目框架在这里基本完成了，后面我们会一步步讲解如何定义组件。

github项目地址：github.com/KevinZhang1…

摘要

以上就是边肖介绍的以Angular材质为主题定义自己构件库的配色系统。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！