使用Angular material主題定義自己的組件庫的配色體系
本期為Angular系列的第一篇文章，我會(huì)從這里搭建Angular sample項(xiàng)目、組件庫、主題、然后每個(gè)組件等。使之成為一個(gè)比較通用的組件庫系列文章，目的有二：
1、自己在寫系列文章過程中不斷夯實(shí)基礎(chǔ)、不斷學(xué)習(xí)補(bǔ)缺；
2、分享給一些不熟悉angular及自定義組件的同學(xué)，使之快速上手并提高。
1. 使用Angular CLI命令行工具生成一個(gè)Angular sample的項(xiàng)目：這里添加了一個(gè)optional的參數(shù)--style=scss，是為了后面使用angular material的themes。待命令完成就生成了一個(gè)可npm start運(yùn)行的標(biāo)準(zhǔn)的angular項(xiàng)目，其中workspace為./quick-pai目錄。
ng n quick-pai --style=scss
2. 因?yàn)槲覀兪且獎(jiǎng)?chuàng)建一個(gè)組件庫，所以我們就依托這個(gè)標(biāo)準(zhǔn)的angular sample項(xiàng)目的workspace創(chuàng)建一個(gè)angular library項(xiàng)目，利用angular cli命令行：這里使用了--prefix=x可選參數(shù)，在后面創(chuàng)建組件的時(shí)候統(tǒng)一使用x前綴，如“x-button”等。執(zhí)行為這個(gè)命令后我們的項(xiàng)目結(jié)果如下：
ng g library x-controls --prefix=x
3. 添加主題文件夾theme到組件庫項(xiàng)目中（使用了angular material的主題，但是這里并沒有安裝angular material完整組件庫，只是參考使用了他的主題themes的思想，之所以這么做顯而易見，一來安裝了它的庫太大，二來我們是學(xué)習(xí)如何寫angular組件及主題，如果安裝了它，我們這個(gè)系列就不用寫了，大家看angular material的源碼好了，它的源碼還是有點(diǎn)復(fù)雜的，所以angular系列文章只會(huì)借鑒它，并不會(huì)復(fù)雜到它的程度，一來本人水平有限，二來沒有精力~-~）。主題文件夾截圖如下：包括一些core的非主題相關(guān)的東西，這里姑且不管它是干什么用的，大概就是只有組件才會(huì)用到，當(dāng)你用組件的時(shí)候引入就好了；另外這里有一個(gè)調(diào)色板文件_palette.scss，還有一個(gè)主題的helper方法的文件_theming.scss，這個(gè)文件會(huì)定義一些function來拿到調(diào)色板里面具體的顏色、定義一些主題等等；還有一個(gè)給組件庫的組件引入主題的文件_all-theme.scss；還有一個(gè)就是一些預(yù)置的主題?；旧暇瓦@些，截圖如下：
4. 這樣一個(gè)組件庫的主題框架就搭建起來了，我們就可以在我們的angular sample項(xiàng)目中引入并使用我們的組件庫了，使用組件庫就必須要npm安裝，這里先不考慮npm，因?yàn)槲覀兊慕M件庫項(xiàng)目是依托這個(gè)angular sample項(xiàng)目的，所以我們直接引入就好了，后面會(huì)講如何npm打包發(fā)布。
4.1引入組件庫：
4.2 引入主題文件：
4.3 然后就可以使用組件了，這里先用創(chuàng)建組件庫時(shí)候的一個(gè)自動(dòng)生成的組件為例子，截圖如下：
可以看到我們的組件成功加載了，并且主題也加上去了，light和dark主題都work，剩下的就是如何使用主題，如何編寫依托主題的組件了。等等，我們的angular sample項(xiàng)目如果要使用這些主題色配置呢，很簡(jiǎn)單！在我們的angular sample的app文件夾下面同樣新增一個(gè)theme的文件夾，下面新建一個(gè)_all-theme.scss文件，使用截圖如下：我們可以看到app component的主題也應(yīng)用上去了，通過global定義的$theme傳入到_app-theme.scss文件中，然后在style.scss中@include進(jìn)入，這樣我們的angular sample就同樣使用了這一套主題了。這里我們使用的是預(yù)置的主題定義，可以考慮一下，如果預(yù)置的不符合，我們?nèi)绾巫远x一套主題色來符合項(xiàng)目的需求，這里就不說了，自行思考。
好了，到這里基本上項(xiàng)目框架搭建完整，后面會(huì)一步步講解如何定義組件。
項(xiàng)目github地址： github.com/KevinZhang1…
總結(jié)
以上所述是小編給大家介紹的使用Angular material主題定義自己的組件庫的配色體系,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
AngularJS學(xué)習(xí)筆記（三）數(shù)據(jù)雙向綁定的簡(jiǎn)單實(shí)例
這篇文章主要介紹了AngularJS學(xué)習(xí)筆記（三）數(shù)據(jù)雙向綁定的簡(jiǎn)單實(shí)例，詳解數(shù)據(jù)雙向綁定實(shí)例的相關(guān)資料,需要的朋友可以參考下。2016-11-11
這篇文章主要給大家介紹了關(guān)于Angular封裝表單控件及一些思想的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用Angular具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
angularjs中使用ng-bind-html和ng-include的實(shí)例
下面小編就為大家?guī)硪黄猘ngularjs中使用ng-bind-html和ng-include的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
AngularJS實(shí)現(xiàn)標(biāo)簽頁的兩種方式
這篇文章分別給大家介紹了AngularJS實(shí)現(xiàn)標(biāo)簽頁的兩種方式，一種是通過普通指令實(shí)現(xiàn)標(biāo)簽頁，另外一種是通過自定義指令實(shí)現(xiàn)的標(biāo)簽頁，有需要的朋友們可以來參考借鑒，下面來一起看看吧。2016-09-09
angularjs 中$apply，$digest，$watch詳解
這篇文章主要介紹了angularjs 中$apply，$digest，$watch詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
詳解angular2采用自定義指令（Directive）方式加載jquery插件
本篇文章主要介紹了詳解angular2采用自定義指令（Directive）方式加載jquery插件 ，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-02-02
AngularJS中ngAnimate模塊支持動(dòng)畫效果，但是ngAnimate模塊并未包含在AngularJS核心庫中，因此需要使用ngAnimate需要在定義Module時(shí)聲明對(duì)其的引用。下面通過本文我們來看看AngularJS動(dòng)畫的詳細(xì)介紹。2016-07-07
Angular2使用Angular-CLI快速搭建工程（二）
這篇文章主要介紹了Angular2使用Angular-CLI快速搭建工程（二）,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了詳解Angular模板引用變量及其作用域，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了AngularJS表單校驗(yàn)用法,結(jié)合實(shí)例形式分析了AngularJS各種常見的表單校驗(yàn)功能及使用技巧,需要的朋友可以參考下2016-11-11