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>
こんな風に表示されたら成功です。
コメント