Material UI 基礎與配置

簡介

Angular Material UI（Angular 材質設計）是一套基於 Material Design 指南的前端框架，為 Angular 應用程式提供一系列高品質的可重用 UI 組件。它能夠幫助開發者快速地搭建美觀、響應式的網頁應用。

優點： 1. 一致性： 提供一致的使用者介面風格，使應用程序在多個平台和設備上擁有統一的外觀和感覺。 2. 易用性： 包含豐富的組件庫，從基本的按鈕和輸入框到複雜的導航框架和數據表格，減少開發時間和成本。 3. 靈活性： 支持主題自定義，允許開發者根據品牌指南自訂顏色、字型等樣式，增強應用的品牌特色。 4. 無障礙支持： 遵循無障礙設計原則，確保所有使用者都能輕鬆訪問和操作應用程式。 5. 社群支持： 擁有活躍的開發者社群，提供大量的文檔、指南和範例代碼，幫助開發者解決問題。

安裝 Angular Material

安裝 Angular Material 的步驟相當簡單，以下是基本步驟：

開啟終端機（Terminal），切換到你的 Angular 專案目錄下。
執行安裝命令：
```
ng add @angular/material
```
此命令將自動為你的專案添加 Angular Material 依賴，並進行配置。
選擇主題： 安裝過程中會提示你選擇一個預設主題，或者你可以選擇自定義主題。
選擇手勢支持： 可選擇是否加入手勢支持，對於某些組件（如滑動列表）可能需要此功能。
設定動畫： 安裝過程會詢問是否設定瀏覽器動畫模塊，對於動畫效果是必需的。

基本佈局組件

Angular Material 提供了多種佈局組件，其中 MatGridList 是一個用於創建網格列表的組件，適合用於展示卡片、圖片或其他元素集合。

使用範例：

首先，在你的模塊文件（例如：app.module.ts）中導入 MatGridListModule：

import { MatGridListModule } from '@angular/material/grid-list';

@NgModule({
  imports: [
    // 其他模塊...
    MatGridListModule
  ]
})
export class AppModule { }

接著，在組件的 HTML 模板中使用 <mat-grid-list> 標籤來定義一個網格列表，並透過屬性如 cols（列數）和 rowHeight（行高）來控制布局：

<mat-grid-list cols="3" rowHeight="100px">
  <mat-grid-tile
    *ngFor="let tile of tiles"
    [colspan]="tile.cols"
    [rowspan]="tile.rows"
    [style.background]="tile.color">
    {{tile.text}}
  </mat-grid-tile>
</mat-grid-list>

按鈕和表單

按鈕（MatButton）：

在模塊文件中導入 MatButtonModule：

import { MatButtonModule } from '@angular/material/button';

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

在 HTML 中使用 <button mat-button> 來創建一個 Material 按鈕：

<button mat-button>點我</button>

表單控件（MatCheckbox）：

導入 MatCheckboxModule：

import { MatCheckboxModule } from '@angular/material/checkbox';

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

使用 <mat-checkbox> 標籤來創建復選框：

<mat-checkbox>選我</mat-checkbox>

通過這些步驟，你就能在 Angular 專案中靈活使用 Angular Material 的組件來搭建豐富的界面和交互效果。