Angular Material 初體驗

Angular Material

Angular Taiwan論壇筆記中有提到Angualr Material,但是筆者沒有多加深入說明,今天來進一步聊聊Angualr Material,藉由初步的撰寫程式碼來建構一個註冊頁面元件讓讀者們對於Angular Material有基本的認識。

初步認識

在開始之前當然是要介紹一下甚麼是Angular Material了,Angular Material是Angular的一個附屬套件,其內容包含許多UI介面例如基礎的Form、Button、Edit Box…等等的,還有進一步的Navigation、Tab…之類的原件,簡單講就是UI需要用到元件應該囊括在內了,有了這個套件在開發網頁時等於有人把很多東西都做好了等你來使用,可以讓開發的速度大大的提升。

講完Material不能不提The Component Dev Kit (CDK),它們兩個的關係就像是皮與骨,CDK是骨,所有的UI互動都是由CDK實作,而Material則是包覆骨的皮,Material中包含一些風格提供開發人員使用,所以運用上可以直接使用Material搭配套件所附的主題使用,或是直接使用CDK來客製化專屬元件。

今天先來談談Material的初體驗,所以先不深入說明,以下開始進入主題,透過Angular Material來建構一個註冊頁面元件。

安裝必要套件

這部分要請各位先安裝Angular CLI,當然首先要先安裝nodejs了,各位可以由官網下載安裝,待安裝完nodejs後透過執行下列指令安裝Angular CLI:

$ npm install -g @angular/cli

安裝完Angular CLI後可以使用cli產生一個新的專案,請輸入以下指令:

$ ng new new-project

這時cli會詢問一些關於新專案的內容,例如是否要使用router之類的,這部分都使用預設值即可,相關內容待之後有專門介紹angular的系列文章再來為大家說明。待新專案建立好之後執行下列指令來安裝Angular Material:

$ ng add @angular/material

透過以上步驟可以安裝好相關的套件,接下來說明一下如何設定專案相關設定。

設定專案內容

首先依據瀏覽器所需內容來import相關元件,首先在module內設定相關內容,如下列步驟所示:

設定動畫模組

首先先import動畫模組進來:

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

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})

設定相依模組

這邊就所需模組import進來即可,沒用到的就不需要import如此可以在build production時將package最小化,這裡我們用到的元件有Button、FormField、Datepicker、Icon、Input幾項:

import {
  MatButtonModule,
  MatFormFieldModule,
  MatDatepickerModule,
  MatNativeDateModule,
  MatIconModule,
  MatInputModule
} from '@angular/material';

@NgModule({
  ...
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatFormFieldModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatIconModule,
    MatInputModule
  ],
  ...
})

設定相關css

這邊我們選擇indigo-pink這個主題,這部分有幾個方式可以設定這內容,這邊選擇在angular.json這個設定黨設定這主題,所以先找到styles的區段加入以下內容:

...
"styles": [
   "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
   "src/styles.css"
],
...

最後由於我們有使用到Material Icon所以要import相關css,這部分在index.html內加入以下設定即可:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

到此就完成我們所需的相關設定,接下來要告訴大家怎麼使用這些元件。

使用相關元件

這部分有個要領,就是需要用的甚麼元件再到官方網站參閱相關api說明文件即可,今天已註冊頁面為例子來展示一下如何使用。

input

這個是使用者輸入的基本元件,主要在html內輸入下列語法即可:

<input matInput placeholder="Name">

form-field

如果要輸入的內容不只一項,可以透過form-field把相關input組合起來,例如下列語法所示:

  <mat-form-field class="example-full-width">
    <input matInput placeholder="Name">
  </mat-form-field>

icon

要使用icon的樣式輸入下列語法即可:

<mat-icon matDatepickerToggleIcon>
    keyboard_arrow_down
</mat-icon>

這裡的重點在於keyboard_arrow_down這代表icon的樣式,matDatepickerToggleIcon下列datepicker會加以說明。

datepicker

如果要輸入日期,用下列語法準沒錯:

<mat-form-field class="example-full-width">
    <input matInput 
        [matDatepicker]="picker" 
        placeholder="Birthday">
    <mat-datepicker-toggle 
        matSuffix [for]="picker">
        <mat-icon matDatepickerToggleIcon>
            keyboard_arrow_down
        </mat-icon>
    </mat-datepicker-toggle>
    <mat-datepicker #picker>
    </mat-datepicker>
</mat-form-field>

這裡的關鍵在於mat-datepicker-toggle以及mat-datepicker,當選擇完日期後會把日期放到matInput內,而matDatepickerToggleIcon當點擊時會觸發選擇日期的視窗出現。

button

最後說明的是按鈕的部分,輸入下列語法即可呈現按鈕:

<button mat-raised-button color="primary">Signin</button>

其中mat-raised-button是按鈕的樣式。

透過上述說明,相信讀者不難完成一個註冊的頁面元件。

結語

今天先跟大家簡單介紹一下Angular Material的相關內容,希望透過一個簡單的說明讓大家可以快速上手,接下來讀者再搭配官方api文件應該不難完成一個前端網頁。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *