Ng-Matero 0.1 已釋出，添加 schamatics，支援 ng add
目前市面上關于 Angular Material 的背景架構比較少，大多都是收費主題，而且都不太好用。
很多人都說 Material 是一個面向 C 端的架構，其實在使用其它架構做管理系統的時候，我發現 Material 的元件基本已經夠用了，其它不足的地方可以配合一些優秀的第三方庫。另外，Material 的确是一個高品質的元件庫，不管是設計思路還是使用方式，都近乎完美。
經過一個多月的設計與思考，我開發了這款基于 Angular Material 的中背景管理架構，初期架構設計已經完成，在接下來的版本中會提供 schematics 支援及 vscode snippet 工具。同時，為了彌補 Material 的不足以及更好的發揮架構的優勢，我建立了另外一個項目以擴充 Material 的元件庫。
因為目前還沒有完善的文檔，是以本篇文章會簡單介紹一下架構的使用。
Github： https://github.com/ng-matero/ng-matero 預覽位址： https://ng-matero.github.io/ng-matero/
先看一下目錄結構，這個目錄結構遵循了 Angular 的最佳實踐，盡量保證結構的規範化與合理性。
架構的響應式布局系統采用了 Angular 官方提供的 flex-layout，包含 flex 以及 grid，确實非常好用。
但是關于列間距問題稍微有點坑，雖然 flex-layout 增加了 <code>fxLayoutGap="16px grid"</code> 這樣看似完美的方案，但是還是不太好用，除非每一個元素塊都包含在 fxFlex 中。最終我還是使用業界比較普遍的 margin 負值的方式。需要在 fxLayout 上面添加 <code>.matero-row</code>，在 fxFlex 上面添加 <code>.matero-col</code>，當然這也不是必須的，在某些情況下使用 grid 方式可能更簡單。
通過在 settings 服務中傳入配置對象可以配置頁面的布局，比如
目前關于配置布局的設計還沒有想好，後期可能會在根子產品進行全局配置，個人覺得更好的方式還是直接調整 layout 的模闆，不要使用上面這種配置方式。
以下是菜單的類型定義
菜單服務會注入到根元件，通過 <code>getAll()</code> 可以擷取到全部菜單，同樣是在初始化資料後通過 <code>set()</code> 方法設定好菜單。以下是菜單的配置示例：
在預覽頁面，大家可以看到很豐富的顔色，而 Material 本身隻有三種主色，通過顔色系統也可以很容易更換顔色。
顔色系統是通過 Material 的官方色值用 sass 生成的，Material 的顔色定義如下，包括主體色值以及對應的對比色值：
可以直接使用 class 添加顔色，比如背景色可以用 <code>.bg-red-500</code>，文本色則是 <code>.text-red-500</code>，與之對應的對比色可以是 <code>.text-light</code>，<code>.text-dark</code>
架構預設提供了 <code>page-header</code> 和 <code>breadcrumb</code> 兩個通用元件，其中 <code>page-header</code> 預設包含 <code>breadcrumb</code>，可以通過設定 <code>showBreadCrumb="false"</code> 關閉面包屑，另外可以通過 <code>title</code> 和 <code>subtitle</code> 設定标題和副标題，<code>page-header</code> 同樣支援顔色系統，可以直接添加顔色類來改變頁面标題部分的顔色，如下：
Helper 編寫延續了 snack-helper 的設計原則，非常簡單，可以參見源碼，在此不過多闡述，感興趣的朋友可以閱讀我之前寫的文章 如何編寫通用的 Helper Class
目前架構隻完成了一期規劃，後面的路還有很長，首先會支援 schematics，可以使用 <code>ng add</code> 來添加項目，同時也會提供 vscode 工具包，最後還希望廣大 ng 愛好者可以加入到項目中來，共建 ng 生态。
感謝您的閱讀，如果您對我的文章感興趣，可以關注我的部落格，我是叙帝利，下篇文章再見！
開發低代碼平台的必備拖拽庫 https://github.com/ng-dnd/ng-dnd
基于 Angular Material 的中背景管理架構 https://github.com/ng-matero/ng-matero
Angular Material Extensions 擴充元件庫 https://github.com/ng-matero/extensions
仿 Windows 照片檢視器插件 https://github.com/nzbin/photoviewer
仿 Windows 照片檢視器插件 jQuery 版 https://github.com/nzbin/magnify
完美替代 jQuery 的子產品化 DOM 庫 https://github.com/nzbin/domq
簡化類名的輕量級 CSS 架構 https://github.com/nzbin/snack
與任意 UI 架構搭配使用的通用輔助類 https://github.com/nzbin/snack-helper
單元素純 CSS 加載動畫 https://github.com/nzbin/three-dots
有趣的 jQuery 卡片抽獎插件 https://github.com/nzbin/CardShow
懸疑科幻電影推薦 https://github.com/nzbin/movie-gallery
鍛煉記憶力的小程式 https://github.com/nzbin/memory-stake