Angular Material Design with Flex-Layou

สำหรับการออกแบบการแสดงผลใน Angular ทาง Google ได้จัดเตรียม Theme ผ่ายใต้ชื่อ Material Design ขั้นตอนทำได้ดังนี้

ขั้นตอนการติดตั้ง

หลังจากได้ทำการสร้าง โปรเจคขั้นตอนต่อมาทำการติดตั้ง สามารถไปอ่านรายละเอียดได้ตามนี้ https://material.angular.io/

ขั้นตอนการสร้างโปรเจคและทดสอบ
$ ng new myApp
$ ng serve -open

ขั้นตอนการติดตั้ง Angular Material

$ cd myApp
$ ng add @angular/material

จากนั้นทำการติดตั้งใน module โดยการกำหนดไฟล์ค่าใน app.module.ts จากตัวอย่างได้ทำการเพื่ม module ที่จำเป็นในการใช้งาน

...
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import {MatButtonModule} from '@angular/material/button';
import {MatCardModule} from '@angular/material/card'
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatSliderModule} from '@angular/material/slider';

...
@NgModule ({....
  imports: [...,
  MatSliderModule,
  MatFormFieldModule,
  MatInputModule,
  MatButtonModule,
  MatCardModule,
  MatToolbarModule
…]
})

ขั้นตอนการติดตั้ง Flex-Layout

ขั้นตอนการติดตั้ง Flex-Layout สามารถศึกษาเพื่มเติมได้ที่ https://github.com/angular/flex-layout

$ npm install -s @angular/flex-layout @angular/cdk

ทำการแก้ไขไฟล์ app.module.ts

import { FlexLayoutModule } from '@angular/flex-layout';
...

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

ออกแบบหน้า login โดยใช้ Material / Flex-layout

สร้าง login componence
$ ng g c login

ปรับแก้ไขให้โปรเจคหน้าแรกเป็น login Componence โดยการปรับไฟล์ app-routing.module.ts ดังนี้

...
import { LoginComponent } from './login/login.component';

const routes: Routes = [
  {path:'',component:LoginComponent}
];

@NgModule({
...

แก้ไขไฟล์ app.component.ts ตามโค๊ดด้านล่าง

<router-outlet></router-outlet>

แก้ไขไฟล์ login.component.html

<div fxLayoutAlign="center center" fxFlexFill class="main-div">
  <mat-card fxFlex="25">
    <mat-toolbar color="primary">Login</mat-toolbar>
    <form fxLayoutAlign="stretch" fxLayout="column" class="login-form" >
      <mat-form-field >
        <input matInput placeholder="Username" >
      </mat-form-field>
    
      <mat-form-field >
        <input matInput type="password" placeholder="Password" >
      </mat-form-field>
      <button mat-raised-button type="submit">Login</button>
    </form>
    
  </mat-card>
</div>

แก้ไขไฟล์ login.component.css

.main-div mat-card{ 
    padding: 0%;

}
.login-form{
    padding: 20px;
}

เอกสารอ้างอิง

https://www.youtube.com/watch?v=f3shwARuhEM

บทความที่เกี่ยวข้องกัน

• ไม่มีบทความที่เกี่ยวข้อง.