使用Angular material主题定义自己的组件库的配色体系


Posted in Javascript onSeptember 04, 2019

本期为Angular系列的第一篇文章,我会从这里搭建Angular sample项目、组件库、主题、然后每个组件等。使之成为一个比较通用的组件库系列文章,目的有二:

1、自己在写系列文章过程中不断夯实基础、不断学习补缺;

2、分享给一些不熟悉angular及自定义组件的同学,使之快速上手并提高。

1. 使用Angular CLI命令行工具生成一个Angular sample的项目:这里添加了一个optional的参数--style=scss,是为了后面使用angular material的themes。待命令完成就生成了一个可npm start运行的标准的angular项目,其中workspace为./quick-pai目录。

ng n quick-pai --style=scss

2. 因为我们是要创建一个组件库,所以我们就依托这个标准的angular sample项目的workspace创建一个angular library项目,利用angular cli命令行:这里使用了--prefix=x可选参数,在后面创建组件的时候统一使用x前缀,如“x-button”等。执行为这个命令后我们的项目结果如下:

ng g library x-controls --prefix=x

使用Angular material主题定义自己的组件库的配色体系

3. 添加主题文件夹theme到组件库项目中(使用了angular material的主题,但是这里并没有安装angular material完整组件库,只是参考使用了他的主题themes的思想,之所以这么做显而易见,一来安装了它的库太大,二来我们是学习如何写angular组件及主题,如果安装了它,我们这个系列就不用写了,大家看angular material的源码好了,它的源码还是有点复杂的,所以angular系列文章只会借鉴它,并不会复杂到它的程度,一来本人水平有限,二来没有精力~-~)。主题文件夹截图如下:包括一些core的非主题相关的东西,这里姑且不管它是干什么用的,大概就是只有组件才会用到,当你用组件的时候引入就好了;另外这里有一个调色板文件_palette.scss,还有一个主题的helper方法的文件_theming.scss,这个文件会定义一些function来拿到调色板里面具体的颜色、定义一些主题等等;还有一个给组件库的组件引入主题的文件_all-theme.scss;还有一个就是一些预置的主题。基本上就这些,截图如下:

使用Angular material主题定义自己的组件库的配色体系使用Angular material主题定义自己的组件库的配色体系

4. 这样一个组件库的主题框架就搭建起来了,我们就可以在我们的angular sample项目中引入并使用我们的组件库了,使用组件库就必须要npm安装,这里先不考虑npm,因为我们的组件库项目是依托这个angular sample项目的,所以我们直接引入就好了,后面会讲如何npm打包发布。

4.1引入组件库:

使用Angular material主题定义自己的组件库的配色体系

4.2 引入主题文件:

使用Angular material主题定义自己的组件库的配色体系

4.3 然后就可以使用组件了,这里先用创建组件库时候的一个自动生成的组件为例子,截图如下:

使用Angular material主题定义自己的组件库的配色体系

使用Angular material主题定义自己的组件库的配色体系

使用Angular material主题定义自己的组件库的配色体系

可以看到我们的组件成功加载了,并且主题也加上去了,light和dark主题都work,剩下的就是如何使用主题,如何编写依托主题的组件了。等等,我们的angular sample项目如果要使用这些主题色配置呢,很简单!在我们的angular sample的app文件夹下面同样新增一个theme的文件夹,下面新建一个_all-theme.scss文件,使用截图如下:我们可以看到app component的主题也应用上去了,通过global定义的$theme传入到_app-theme.scss文件中,然后在style.scss中@include进入,这样我们的angular sample就同样使用了这一套主题了。这里我们使用的是预置的主题定义,可以考虑一下,如果预置的不符合,我们如何自定义一套主题色来符合项目的需求,这里就不说了,自行思考。

使用Angular material主题定义自己的组件库的配色体系使用Angular material主题定义自己的组件库的配色体系使用Angular material主题定义自己的组件库的配色体系使用Angular material主题定义自己的组件库的配色体系

好了,到这里基本上项目框架搭建完整,后面会一步步讲解如何定义组件。

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

总结

以上所述是小编给大家介绍的使用Angular material主题定义自己的组件库的配色体系,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
利用jquery包将字符串生成二维码图片
Sep 12 Javascript
jquery动态加载select下拉框示例代码
Dec 10 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 Javascript
js实现分页功能
May 24 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
vue项目打包上传github并制作预览链接(pages)
Apr 19 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 #Javascript
解决layer图标icon不加载的问题
Sep 04 #Javascript
JSX在render函数中的应用详解
Sep 04 #Javascript
关于layui的动态图标不显示的解决方法
Sep 04 #Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 #Javascript
简单谈谈javascript高级特性
Sep 04 #Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 #Javascript
You might like
星际争霸中的对战模式介绍
2020/03/04 星际争霸
无线电的诞生过程
2021/03/01 无线电
NT IIS下用ODBC连接数据库
2006/10/09 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
php显示页码分页类的封装
2017/06/08 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
DOM 基本方法
2009/07/18 Javascript
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
Python入门篇之数字
2014/10/20 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
董事长岗位职责
2013/11/30 职场文书
年终工作总结范文2014
2014/11/27 职场文书
端午节活动总结报告
2015/02/11 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技