Angular Material 17+ 高級教程 – Material Ripple

介紹

Ripple (波紋) 是 Material Design 中一個標誌性的特色。

點擊 button 會濺起水波的感覺。

 

參考

Docs – Ripples

 

When to use it?

一般情況下，我們很少需要自己去使用 Ripple。因爲 Angular Material 的各個組件 (比如 mat-button) 都已經自帶 Ripple 了。

我是遇到一個比較特殊的需求才用上 Ripple 的。

需求是這樣的：

有一個 Sidebar，Sidebar 裏有一個 Extended Fab Button，這個 Sidebar 可以 collapse，當 collapsed 後 Extended Fab Button 會變小。

假如我們直接給 Extended Fab Button 一個 width: 56px，效果是這樣的

沒關係，我們 text hide 起來看看

 依然被一層東西蓋着了，翻看 Extended Fab Button 的 HTML 結構

有一堆的 div，每個 div 負責不同的東西，比如 Ripple，focus 時的變暗色等等。

結論：要改 Extended Fab Button 的 width 不那麼容易。

爲了滿足需求，我們只能自己模擬一個 Extended Fab Button 了。

 

Simulate Extended Fab Button with Ripple

模擬 Extended Fab Button 的 Layout，顏色，字體，這些還不算太難

HTML

<button class="my-mat-extended-fab-button">
  <mat-icon>edit</mat-icon>
  Create products
</button>

Styles

.my-mat-extended-fab-button {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--mdc-extended-fab-container-shape);
  background-color: var(--mdc-fab-container-color);
  color: var(--mat-fab-foreground-color);
  padding-inline: 12px 20px;
  padding-block: 16px;
  font-weight: 500;
  font-size: 14px;

  box-shadow: var(--mdc-extended-fab-container-elevation-shadow);

  &:hover,
  &:focus {
    /*
      1. Angular Material 的 Extended Fab Button 用了 2 層來做 hover 效果
          這裏偷工減料，只用一層，直接抄它 2 層效果的顏色來用。
    */
    background-color: #cecef4;
  }
}

效果

唯一比較難搞的是點擊後的 Ripple 效果。

幸好 Angular Material 有獨立封裝 Ripple 效果。

添加 Ripple 效果

使用 matRipple 指令就可以了

<button class="my-mat-extended-fab-button" matRipple>
  <mat-icon>edit</mat-icon>
  Create products
</button>

效果

至少有 90% 以上相似度就可以了。

 

Ripple の Options

比較常用的 options：

1. color

   <button class="my-mat-extended-fab-button" matRipple matRippleColor="red">

   效果

2. radius

   <button class="my-mat-extended-fab-button" matRipple matRippleColor="red" [matRippleRadius]="20">

   效果

3. centered

   by default 波紋是從點擊的位置發散的，設置 centered 會讓波紋從中心開始發散。

   <button 
     class="my-mat-extended-fab-button" 
     matRipple 
     matRippleColor="red" 
     [matRippleRadius]="20" 
     [matRippleCentered]="true"
   >

   效果

 

Ripple の Trigger

Trigger 的玩法是這樣的

<button class="my-mat-extended-fab-button" matRipple [matRippleTrigger]="rippleTrigger">
  <mat-icon>edit</mat-icon>
  Create products
</button>

<button class="trigger-btn" #rippleTrigger>trigger</button>

當點擊 Extended Fab Button 時，它不會有 Ripple 效果，反而是點擊 trigger button 時 Extended Fab Button 纔會出現 Ripple 效果，換了觸發器。

效果

 

Ripple の Manual Trigger

Ripple 指令有一個 launch 方法，我們可以完全控制觸發的時機。

export class AppComponent {
  // 1. 獲取 Ripple 指令
  readonly myMatExtendedFabButtonRipple = viewChild.required('myMatExtendedFabButton', { read: MatRipple });

  constructor() {
    // 2. 最好等第一輪渲染完成後才幹活
    afterNextRender(() => {
      // 3. 每 500ms 波動一次
      window.setInterval(() => {
        // 4. 設定座標 x, y
        const x = 97;
        const y = 161;

        // 5. 覆蓋原本的，比如 e.g. color 等等，當然也可以不要覆蓋
        const overrideConfig = {
          color: 'pink',
        } satisfies RippleConfig;

        // 6. 調用 launch 方法觸發 Ripple 效果
        this.myMatExtendedFabButtonRipple().launch(x, y, overrideConfig);
      }, 500);
    });
  }
}

觸發時可以設置座標 x, y。

效果

座標是對着 viewport 算的，不管有沒有 scroll，它和 getBoundingClientRect 算法一樣。

 

目錄

上一篇 Angular Material 17+ 高級教程 – Material Icon

下一篇 Angular Material 17+ 高級教程 – CDK Accessibility の Focus

想查看目錄，請移步 Angular 17+ 高級教程 – 目錄