angular封裝組件的步驟（Angular組件庫系列之主題Theme）

2023-10-15 02:40:03

上一篇我們說到了Checkbox組件，這一篇我們說說angular的主題配色體系，我們本次編寫的組件庫系列也用到css預處理器scss，angular官方也推薦使用scss來設置樣式及主題。Scss有提供了很多方便的東西，使得我們處理起主題樣式來得心應手，比如有嵌套語法，@mixin，有變量定義，有map、get方法等等。

好了，首先同樣的我們新建一個theme文件夾到lib文件夾下，然後看一下這個文件夾包含了哪些內容，這裡我們著重說一下幾個主要的文件夾。

theme文件夾

theme/all文件夾 - 主要包含我們組件庫的mixin，方便使用我們組件庫的用戶@include這個mixin，這樣就能使用組件庫的配色主題了。這個mixin裡面包含的就是我們組件庫中每個組件的配色樣式。

主題入口文件，可供使用者@include此mixin來使用

Button組件的主題scss文件

theme/theming文件夾 - 包含預構建的一些配色主題，_palette.scss和_theming.scss文件。其中_palette.scss文件定義了我們的調色板，我們預構建的主題使用的就是這個調色板裡面的相關色調，_theming.scss包含了一些helper方法，方便我們引入及匹配我們需要的顏色，如cil-color方法可以拿到配色map中指定的顏色等。

其中一個預定義主題文件

調色板文件

主題幫助類文件

還有一些其他的文件夾基本上是一些core公共樣式，這裡就不討論了。

那麼，我們配置好的主題如何引用呢，很簡單，當你npm install了我們的組件庫之後，在你的項目style.scss裡面引入即可，如下圖，第二行導入我們的入口文件來引入所有的組件庫組件的主題樣式，第三行導入我們預定義的主題配色（這裡也可以自定義主題配色），這樣根據預定義的主題配色，我們的組件庫就會展示不同的主題了。