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

本期为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

​

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

​ ​

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

4.1引入组件库：

​

4.2 引入主题文件：

​

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

​

​

​

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

​ ​ ​ ​

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

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

总结

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

赞 (0)

相关推荐

  • Angularjs material 实现搜索框功能

    angular-material 是 AngularJS 的一个子项目,用来提供实现了 Material Design 风格的组件. Material 提供了大量的android 风格的UI组件,使用 angularjs + Material 可以很容易开发出风格接近原生 Android 5.x 的web界面.但在实际使用的过程中并不总是能满足我们的需求.开发一个组件就成了我们必须学习的内容. 下面是一个组件的实现: //前面省略若干代码 directive('mdSearchInput',[f

  • Material(包括Material Icon)在Angular2中的使用详解

    1.引入material npm包 npm install @angular/material @angular/cdk 2.新建一个ebiz-material.module.ts方便管理引入material的module ng g module ebiz-material -app=ebiz-ui 3.在app的根module中引入ebiz-material.module.ts import { EbizMaterialModule } from './ebiz-material/ebiz-m

  • 详解angular2封装material2对话框组件

    1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍.这里提供一个方案用于封装我们最常用的alert和confirm组件. 2. 官方使用方法之alert ①编写alert内容组件 @Component({ template : `<p>你好</p>` }) export class AlertComponent { constructor(){ } } ②在所属模块上声明 //必须声明两处 declarations: [ AlertComp

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

    本期为Angular系列的第一篇文章,我会从这里搭建Angular sample项目.组件库.主题.然后每个组件等.使之成为一个比较通用的组件库系列文章,目的有二: 1.自己在写系列文章过程中不断夯实基础.不断学习补缺: 2.分享给一些不熟悉angular及自定义组件的同学,使之快速上手并提高. 1. 使用Angular CLI命令行工具生成一个Angular sample的项目:这里添加了一个optional的参数--style=scss,是为了后面使用angular material的the

  • React UI组件库之快速实现antd的按需引入和自定义主题

    React UI组件库之快速实现antd的按需引入和自定义主题

    目录 React UI组件库 流行的开源React UI组件库 antd的基本使用 antd样式按需引入 antd自定义主题 总结 React UI组件库 流行的开源React UI组件库 material-ui(国外) ant-design(国内蚂蚁金服) antd的基本使用 antd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品. 安装antd组件库: npm install antd --save yarn add antd 默认按需引入

  • Vue项目中使用iView组件库设置样式不生效的解决方案

    目录 使用iView组件库设置样式不生效问题 解决使用iview或者element-ui组件修改样式不生效 1.样式如果定义为 2.样式如果没有定义 使用iView组件库设置样式不生效问题 找到要设置样式的类名,直接按照下面写法设置就可以了! <style lang="less" scoped> @deep: ~'>>>'; @{deep}.ivu-transfer-operation {     visibility: hidden !important

  • 如何用DevUI搭建自己的Angular组件库

    如何用DevUI搭建自己的Angular组件库

    前言 作为前端开发者,随着公司业务的不断发展和增长,业务对组件功能.交互的诉求会越来越多,不同产品或者团队之间公用的组件也会越来越多,这时候就需要有一套用于支撑内部使用的组件库,也可以是基于已有组件扩展或者封装一些原生三方库.本文会手把手教你搭建自己的Angular组件库. 创建组件库 我们首先创建一个Angular项目,用来管理组件的展示和发布,用以下命令生成一个新的项目 ng new <my-project> 项目初始化完成后,进入到项目下运行以下cli命令初始化lib目录和配置, 生成一

  • Angular Material Icon使用详解

    1. 引入图标资源 在项目index.html文件里添加icon的图标库文件的引用. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" rel="stylesheet"> 2. 导入MatIconModule 如果需要在别的组件同样使用,则需要exports里面引出. 3. icons 资源 可以访问

  • vue组件库的在线主题编辑器的实现思路

    一般而言一个组件库都会设计一套相对来说符合大众审美或产品需求的主题,但是主题定制需求永远都存在,所以组件库一般都会允许使用者自定义主题,我司的vue组件库hui的定制主题简单来说是通过修改预定义的scss变量的值来做到的,新体系下还做到了动态换肤,因为皮肤本质上是一种静态资源(CSS文件和字体文件),所以只需要约定一种方式来每次动态请求加载不同的文件就可以了,为了方便这一需求,还配套开发了一个Vessel脚手架的插件,只需要以配置文件的方式列出你需要修改的变量和值,一个命令就可以帮你生成对应的皮

  • Angular.js实现动态加载组件详解

    前言 有时候需要根据URL来渲染不同组件,我所指的是在同一个URL地址中根据参数的变化显示不同的组件:这是利用Angular动态加载组件完成的,同时也会设法让这部分动态组件也支持AOT. 动态加载组件 下面以一个Step组件为示例,完成一个3个步骤的示例展示,并且可以通过URL user?step=step-one 的变化显示第N个步骤的内容. 1.resolveComponentFactory 首先,还是需要先创建动态加载组件模块. import { Component, Input, Vie

  • Angular6新特性之Angular Material

    Angular6新特性之Angular Material

    Angular Material是包含Navigation/Dashboard/Table三种图形类型,这篇文章中将会了解一些其使用的方式. 准备:安装Material 进入到上篇文章创建的demo2,使用ng add进行安装 liumiaocn:demo2 liumiao$ pwd /tmp/trainings/angualr/demo2 liumiaocn:demo2 liumiao$ 安装命令:ng add @angular/material liumiaocn:demo2 liumiao

  • 使用 Angular RouteReuseStrategy 缓存（路由）组件的实例代码

    使用 Angular RouteReuseStrategy 缓存组件 Cache components with Angular RouteReuseStrategy RouteReuseStrategy provider 允许我们控制 Angular 路由和组件生命周期的行为. 当我们在组件间切换的时候,Angular都会销毁上一个组件,并且创建一个新的组件.在大多数情况下,我们可能不想让它这样工作,因为每次加载一个组件,可能会有很多类似HTTP请求一样的昂贵的操作. 这时候就需要RouteR

  • 基于 angular material theming 机制修改 mat-toolbar 的背景色(示例详解)

    最近在学习 angular,记录一下昨天的进展,解决的问题是通过 theme 的配置修改 mat-toolbar 的背景色,避免对色彩的硬编码. 首先通过 mat-toolbar (以下统一称为 toolbar)的实现源代码 _toolbar-theme.scss 得知背景色来自 theme 中 background palette 的 app-bar. background: theming.get-color-from-palette($background, app-bar); 于是通过下

随机推荐