全新 UI 震撼來襲！ng-matero v18 正式釋出！

叙帝利發表於2024-07-02
UI

前言

斷斷續續折騰了近兩週，ng-matero v18 終於釋出了。其中最大的亮點是啟用 Material 3 主題以及全新的 UI 設計。特別說明，這是 ng-matero 釋出五年以來首次 UI 大改版！本文重點聊一下 Material 3 的使用方式以及 v18 的幾個小變化。

倉庫：https://github.com/ng-matero/ng-matero
預覽：https://ng-matero.github.io/ng-matero/

如何使用 Material 3 主題

為了適配 M3，Angular Material 從 v16 開始對主題系統進行了大刀闊斧的改動。v16 將所有主題樣式全部拆分到 CSS token 中；v17 在 Material 實驗庫中增加 M3 的 CSS token，提供實驗性支援；v18 正式釋出 M3 主題，所有 M2 主題配置都增加 m2- 字首。

這些變化在使用者層面是無感知的，使用 ng update 自動升級時，原有配置都會自動新增 m2- 字首。使用 M3 主題的方式如下：

@use '@angular/material' as mat;

@include mat.core();

$my-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: mat.$violet-palette,
  ),
));

html {
  @include mat.all-component-themes($my-theme);
}

如果使用了 Material 的擴充套件元件庫，則必須使用 mat.private-deep-merge-all 額外處理一下主題配置的合併。

@use '@angular/material' as mat;
@use '@ng-matero/extensions' as mtx;

...

$my-theme: mat.private-deep-merge-all(
  mat.define-theme($my-config),
  mtx.define-theme($my-config)
);

html {
  @include mat.all-component-themes($my-theme);
  @include mtx.all-component-themes($my-theme);
}

講幾句題外話，增加 M3 主題之後，Angular Material 的主題系統變得更加複雜，想要擴充套件 Material 的元件的難度也加大了。透過 define-theme 生成的配置項結構如下：

$theme: (
  _mat-theming-internals-do-not-access: (
    theme-version: 1,
    theme-type: light,
    palettes: (...),
    color-tokens: (...),
    typography-tokens: (...)
    ...
  )
)

所以，Material 擴充套件庫的主題配置也必須使用 _mat-theming-internals-do-not-access 作為 key 才能融合到已有的主題系統中。如果有時間的話，我會專門寫文章介紹 Angular Material 的主題系統。

如何自定義 Material 3 主題

在 Material 3 中，增加了一個 color roles 的概念（什麼是 color roles?），主題定製就是更改這些顏色變數。

在 Angular Material 中，所有 color roles 都有對應的 CSS token，但是預設情況下，Angular Material 的元件都是從主題配置的調色盤中取色的，這些 CSS token 並不會暴露出來。如果想使用自定義主題，必須用下面的方式開啟：

$my-material-app-theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
      use-system-variables: true, // 👈 Added
    ),
    typography: (
      use-system-variables: true, // 👈 Added
    ),
    density: (
      scale: 0,
    ),
  )
);

請注意：開啟上面的配置之後，所有的顏色都消失了，你必須手動新增 color roles 才可以。有關自定義主題的更多內容，請閱讀下面的文章。

  • 使用 CSS 變數更改 Angular Material 主題
  • Angular Material 的主題生成器

Material 3 的顏色助手

在 ng-matero v18 中，顏色助手的調色盤已經更新到 Material 3。所謂的顏色助手就是一些輔助類，你可以使用比如 bg-red-50、text-red-50、border-red-50 這樣的 class 去設定 CSS 的顏色屬性。

M2 和 M3 的調色盤最大的區別就是顏色的 hue，另外 M3 的預設顏色數減少了。其實 M3 的調色盤是 Angular Material 單獨定義的，在 Material Design 的官方網站中，我並沒有找到具體的介紹，不過 M2 的調色盤是有明確定義的，請檢視 2014 Material Design color palettes。

M2 的調色盤（19 色）

M3 的調色盤（12 色）

最佳化側邊欄的收窄效果

側邊欄的收窄效果是一個很久遠的遺留問題，詳情可以檢視這個 issue。該問題本身其實並不複雜，最簡單的修復方式就是在側邊欄收窄的時候把子選單收起來，而且大部分 admin 模板也是這麼處理的。但是我個人覺得這種處理方式並不理想，由於遲遲沒找到理想的解決方案，所以就一直拖著（其實使用者也可以自行修復）。

在 ng-matero v18 中，經過一整天的思想鬥爭，這個問題終於圓滿解決。在側邊欄收窄的時候顯示子選單的圖示，展開的時候隱藏，如果沒有設定子選單的圖示，則顯示第一個文字字元。

新的資原始檔夾

如果你建立一個 Angular 18 的新專案，你會發現原來的 assets 資料夾不見了，而根目錄多了一個 public 資料夾。這個變化使得 src 目錄再次精簡（只剩一個 app 目錄），另一方面，就是專案內靜態檔案的地址不需要再加 /assets 字首。不過對於想升級的朋友來說也不用驚慌，這個變化並不是一個 break change，因為之前的專案並不會受影響，這種引用變化主要是在 angular.json 中調整的。

{
  "projects": {
    "ng-matero": {
      "architect": {
        "build": {
-         "assets": [
-           "src/favicon.ico",
-           "src/assets"
-         ],
+         "assets": [
+           {
+             "glob": "**/*",
+             "input": "public"
+           }
+         ],
...

總結

升級 ng-matero v18 最大的難點是 UI 設計的部分，本人雖有一定的審美基礎，但在修改的過程中還是遇到很大挑戰。一方面想要融合 Material 3 的設計風格，給人耳目一新的感受；另一方面又不想改動太大，以免失去產品固有的一些特點。這種變與不變之間的分寸是最難拿捏的。那麼你喜歡最新的 UI 設計嗎？

相關文章