Angular で Material Design を使用する

Material Design はGoogleが提唱しているデザインフォーマットです。オープンソースで提供されています。Angular も Google が提唱している SPA フレームワークですので、Angular から簡単に Material Design を使用してみましょう。

1. Angular Material, Angular CDK, Angular Animations をインストールする。

以下のNPMからサクッとインストールします。


npm install --save @angular/material @angular/cdk @angular/animations

2. Material Icon を表示する方法

2.1. app.module.ts を修正して MatIconModule を import する

以下を先頭に追加します。


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

imports の中に MatIconModule を追加します。


@NgModule({
    ... 省略 ...
  ],
  imports: [
    ... 省略 ...
    MatIconModule
    ... 省略 ...
})

2.2. index.html の中に Material Icon 用のstylesheet を追加します。


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

2.3. 表示したい箇所にMaterial Icon のHTMLを追加します。


<mat-icon aria-hidden="false" aria-label="Example home icon">home</mat-icon>

こんな風に表示されたら成功です。

3. ボタンを表示する方法

3.1. app.module.ts を修正して MatButtonModule を import する

以下を先頭に追加します。


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

imports の中に MatButtonModule を追加します。


@NgModule({
    ... 省略 ...
  ],
  imports: [
    ... 省略 ...
    MatButtonModule
    ... 省略 ...
})

3.2. Material Design のテーマCSS をインポートします。

https://material.angular.io/guide/theming

例えばですが、style.css に以下を追加します。


@import '@angular/material/prebuilt-themes/indigo-pink.css';

3.3. 表示したい箇所にMaterial Button のHTMLを追加します。


<button mat-button>Basic</button>
<button mat-button color="primary">Primary</button>
<button mat-button color="accent">Accent</button>
<button mat-button color="warn">Warn</button>
<button mat-button disabled>Disabled</button>

こんな風に表示されたら成功です。

4. ラジオボタンを表示する方法

4.1. app.module.ts を修正して MatButtonModule を import する

以下を先頭に追加します。


import {MatRadioModule} from '@angular/material/radio';

imports の中に MatRadioModule を追加します。


@NgModule({
    ... 省略 ...
  ],
  imports: [
    ... 省略 ...
    MatRadioModule
    ... 省略 ...
})

4.2. 表示したい箇所にMaterial Button のHTMLを追加します。


<mat-radio-group aria-label="Select an option">
  <mat-radio-button value="1">Option 1</mat-radio-button>
  <mat-radio-button value="2">Option 2</mat-radio-button>
</mat-radio-group>

こんな風に表示されたら成功です。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です