Material UI 主題與動畫

創建和使用自訂主題

Angular Material 支持自訂主題，讓開發者可以根據自己的品牌風格設計應用程式的外觀。自訂主題涉及修改顏色、字型等元素。

定義主題： 在你的應用程式的 styles.scss（或任何全局樣式檔案）中，你可以定義一個自訂主題。首先，引入 Angular Material 主題和顏色函數：

@import '~@angular/material/theming';
@include mat-core();

自訂顏色配置： 接下來，定義你的主色（primary）、輔助色（accent）和警告色（warn）。使用 Angular Material 的預定義顏色函數：

$custom-primary: mat-palette($mat-indigo);
$custom-accent: mat-palette($mat-pink, A200, A100, A400);
$custom-warn: mat-palette($mat-red);

$custom-theme: mat-light-theme(
  (
    color: (
      primary: $custom-primary,
      accent: $custom-accent,
      warn: $custom-warn,
    ),
  )
);

包含自訂主題： 最後，使用 Angular Material 的 mixin 包含你的自訂主題：

@include angular-material-theme($custom-theme);

這樣，你就創建了一個自訂的主題，它將被應用到你的應用程式中所有的 Angular Material 組件。

Material 色系和圖標

Angular Material 提供了一套豐富的顏色系統和一系列的 SVG 圖標，方便開發者使用。

顏色系統

在你的樣式文件中，可以直接引用 Material Design 的顏色：

@import '~@angular/material/theming';
.example-class {
  background-color: mat-color($mat-indigo);
  color: mat-color($mat-pink, A200);
}

圖標（Icons）

要使用 Material 圖標，先在你的模塊（例如：app.module.ts）中導入 MatIconModule：

import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [
    MatIconModule
  ]
})
export class AppModule { }

然後，在 HTML 中使用 <mat-icon> 標籤來顯示圖標：

<mat-icon>home</mat-icon>

如何對組件進行樣式自定義

對 Angular Material 組件進行樣式自定義主要通過 CSS/SCSS。可以直接在組件的樣式文件中覆蓋默認樣式：

.button-example .mat-button {
  background-color: #94B8FF;
  color: white;
}

動畫庫

Angular Material 包含一個動畫庫，幫助開發者在應用程式中輕鬆添加動畫，提升用戶體驗。

導入 BrowserAnimationsModule： 確保在你的應用模塊中導入了 BrowserAnimationsModule：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserAnimationsModule
  ]
})
export class AppModule { }

使用預定義動畫： Angular Material 提供了一些預定義的動畫函數，可以直接在組件中使用：

import { fadeIn, fadeOut } from '@angular/animations';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.html',
  styleUrls: ['./your-component.scss'],
  animations: [
    fadeIn, // 使用 fadeIn 動畫
    fadeOut // 使用 fadeOut 動畫
  ]
})

這樣，你就可以在 Angular 應用中使用 Angular Material 的自訂主題、顏色系統、圖標以及動畫庫，來創建具有吸引力和一致性的用戶界面。