Material UI 進階組件

導航組件的使用

導航組件在 Angular Material 中扮演著重要的角色，它們提供了用戶界面的導航功能。以下將介紹如何使用 MatSidenav 和 MatToolbar 這兩個組件。

MatSidenav

MatSidenav 提供了側邊導航菜單的功能，適用於展示導航連結或其他內容。

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

import { MatSidenavModule } from '@angular/material/sidenav';

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

HTML 模板： 使用 <mat-sidenav-container> 包裹 <mat-sidenav> 和主內容區 <mat-sidenav-content>：

<mat-sidenav-container>
  <mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>
  <mat-sidenav-content>Main content</mat-sidenav-content>
</mat-sidenav-container>

MatToolbar

MatToolbar 是一個多功能的工具欄，可以用作應用程式的頁面頂部導航。

模塊導入： 導入 MatToolbarModule：

import { MatToolbarModule } from '@angular/material/toolbar';

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

HTML 模板： 使用 <mat-toolbar> 創建一個工具欄，並加入標題或其他元素：

<mat-toolbar color="primary">
  應用程式標題
</mat-toolbar>

表單控件進階使用

在 Angular Material 中，MatFormField 和 MatInput 組件能夠結合使用來創建具有豐富效果的表單欄位。

MatFormField 和 MatInput

模塊導入： 導入 MatFormFieldModule 和 MatInputModule：

import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [
    MatFormFieldModule,
    MatInputModule
  ]
})
export class AppModule { }

HTML 模板： 使用 <mat-form-field> 包裹 <input matInput>：

<mat-form-field appearance="fill">
  <mat-label>輸入你的名字</mat-label>
  <input matInput placeholder="名字">
</mat-form-field>

資料展示組件

Angular Material 提供了多種資料展示組件，如 MatTable 和 MatList，適用於展示列表數據和表格數據。

MatTable

用於展示列數據的組件。

模塊導入： 導入 MatTableModule：

import { MatTableModule } from '@angular/material/table';

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

HTML 模板： 定義表格結構和數據源：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- 定義列 -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> 編號 </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- 表頭和表體 -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

MatList

用於展示列表數據的組件。

模塊導入： 導入 MatListModule：

import { MatListModule } from '@angular/material/list';

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

HTML 模板： 使用 <mat-list> 和 <mat-list-item> 來展示列表：

<mat-list>
  <mat-list-item *ngFor="let item of items">{{item}}</mat-list-item>
</mat-list>

提示與確認對話框

MatDialog 用於創建模態對話框，可以用於顯示提示、確認消息或自定義內容。

模塊導入： 導入 MatDialogModule：

import { MatDialogModule } from '@angular/material/dialog';

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

使用對話框： 在組件中注入 MatDialog 並開啟對話框：

import { MatDialog } from '@angular/material/dialog';
import { YourDialogComponent } from './your-dialog.component';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.html',
})
export class YourComponent {
  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(YourDialogComponent, {
      width: '250px',
      data: {name: 'Angular'}
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }
}

對話框組件： 創建一個對話框組件 YourDialogComponent，並使用 <mat-dialog-content> 和 <mat-dialog-actions> 來定義內容和動作按鈕：

<h2 mat-dialog-title>對話框標題</h2>
<mat-dialog-content>這是一個對話框。</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button [mat-dialog-close]="true">確定</button>
  <button mat-button [mat-dialog-close]="false">取消</button>
</mat-dialog-actions>

經由以上步驟，你可以在 Angular 應用中靈活使用 Angular Material 的導航組件、表單控件、資料展示組件及對話框，以創建豐富和互動性強的用戶界面。