使用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 相关文章推荐
关于js new Date() 出现NaN 的分析
Oct 23 Javascript
jQuery输入城市查看地图使用介绍
May 08 Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
Javascript中的关键字和保留字整理
Oct 16 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
vue.js的提示组件
Mar 02 Javascript
vue路由拦截及页面跳转的设置方法
May 24 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
小程序实现五星点评效果
Nov 03 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 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
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
JS继承 笔记
2011/07/13 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
python实现socket客户端和服务端简单示例
2014/02/24 Python
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
运动会广播稿300字
2014/01/10 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
党委工作总结2015
2015/04/27 职场文书
学校标语口号大全
2015/12/26 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
MySQL系列之三 基础篇
2021/07/02 MySQL
MySQL sql模式设置引起的问题
2022/05/15 MySQL