使用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 相关文章推荐
Javascript中设置默认参数值示例
Sep 11 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
详解javascript函数的参数
Nov 10 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
vue如何判断dom的class
Apr 26 Javascript
官方推荐react-navigation的具体使用详解
May 08 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
TypeScript中的方法重载详解
Apr 12 Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 Javascript
原生JS实现烟花效果
Mar 10 Javascript
使用Ajax实现进度条的绘制
Apr 07 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
php数组编码转换示例详解
2014/03/11 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
用ADODB.Stream转换
2007/01/22 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
浅谈Express异步进化史
2017/09/09 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
Python读取Excel的方法实例分析
2015/07/11 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
python动态文本进度条的实例代码
2020/01/22 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
用python写PDF转换器的实现
2020/10/29 Python
迪拜航空官方网站:flydubai
2017/04/20 全球购物
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
银行出纳岗位职责
2013/11/25 职场文书
高中毕业自我鉴定
2013/12/19 职场文书
超市中秋节活动方案
2014/02/12 职场文书
小学生家长寄语
2014/04/02 职场文书
2014年质量管理工作总结
2014/12/01 职场文书