前言

Angular Material 作為 Angular 的官方元件庫，無論是設計互動還是易用性都有著極高的質量。正如官方所說其目的就是構建基於 Angular 和 TypeScript 的高質量元件庫。

官方列舉了如下幾點來解釋“高質量”的含義。

• 國際化和可訪問性，以便所有使用者都可以使用。
• 不會讓開發人員感到困惑的簡單 API。
• 在各種各樣沒有 bug 的用例中按預期行事。
• 通過單元測試和整合測試更好地測試行為。
• 可在 Material Design 規範的範圍內進行定製。
• 將效能開銷降至最低。
• 程式碼簡潔，文件友好，可以作為 Angular 開發人員的一個例子。

Material Design 作為一個非常流行的設計語言，它有多個版本的實現。React 版的 Material Design 有著很高的人氣，大家可以自行對比，我就不贅述了，以免引起無謂的爭吵，進而扯到框架層面。我可以說一下自己的感受，Angular Material 的互動更加流暢，細節做的更好。

Angular Material 元件庫雖然很優秀，但是卻被帶上了只適合做 C 端介面的帽子。這也是我剛開始不敢選擇 Angular Material 的一個原因。但是編寫 ng-matero 的過程中，隨著對 Angular Material 的深入瞭解，我發現這種說法稍顯狹隘甚至產生了一定的誤導，所以我希望這篇文章可以讓大家對 Angular Material 有一個更加正確的認識。接下來我會從相對巨集觀的角度介紹 Angular Material 設計的一些亮點，並且簡單介紹 Angular Material 的一些使用技巧。

題外話：為什麼 ng-matero 會選擇 Angular Material?

拋開官方提到的幾點不談。首先我是那種比較激進的開發者，對於先進的設計理念，我都有躍躍欲試的執念。國內的 Element UI 以及 Ant Design 都是 Bootstrap 3 時代的風格。隨著業務人員對介面細緻緊湊的要求越來越高，我發現 Material 的設計風格更加符合需求，層次感更強。不過最主要的還是 Material Design 的互動更吸引我。另外，Angular Material 的樣式是基於 Sass 編寫，而我最喜歡的也是 Sass，所以基於 Angular Material 編寫 ng-matero 就是命運的歸宿。順便插一句，如果大家糾結用 Sass 還是 Less，可以看一下這篇文章 CSS 前處理器中的迴圈，個人不建議用 Less，請原諒我無意引戰