【Angular】MatButtonModuleでボタンを作る

ボタンを作る際に、普通に<input type="submit">みたいに書いてももちろん作れますが、Angularでは「Angular Material」というかっこいいUIで作るための部品が用意されていますので、そちらを使っても良いでしょう。
今回はMatButtonModuleを使ってボタンを作っていきます。

スポンサーリンク

AngularMaterialを追加する

Angular Materialはデフォルトでは入っていないので、コマンドを実行して追加していきましょう。

ng add @angular/material

いくつか設定を聞かれますが、基本的にデフォルト値のままEnter押していればよいです。

MatButtonModuleをインポート

まず、MatButtonModuleを使えるようにするためにapp.module.tsに追記していきます。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    MatButtonModule,
MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

マーカーしている部分を追記していただければ良いです。
import文を追記して、NgModuleデコレータのimportにMatButtonModuleを追加してください。
後、MatIconModuleというものもインポートしていますが、これはアイコンでボタンを作っていく際に使っていきます。

実際に作ってみる

今回コンポーネントのHTMLにこのように書いてみました。
MatButtonModule、MatIconModuleを使って作れるボタンを一通り作ってみました。

<div>
    <p>Material Buttonを表示していく</p>
    <button mat-button>mat-button</button>
    <button mat-stroked-button>mat-stroked-button</button>
    <button mat-flat-button>mat-flat-button</button>
    <button mat-raised-button>mat-raised-button</button>
    <button mat-icon-button>
        <mat-icon>schedule</mat-icon>
    </button>
    <button mat-fab>fab</button>
    <button mat-mini-fab>mini-fab</button>
</div>

ちなみにcssはこのように書いていますので、良ければ参考にしてみてください。

div{
    background-color: lightgreen;
}
p{
    font-size: 16px;
    color:black;
    margin: 14px;
}
button{
    margin:14px;
}

この状態で画面を表示するとこのようになります。

左から見ていきましょう。

mat-button

一番ノーマルなボタンです。ボタンのテキストだけ表示するボタンになります。
ちなみにマウスポインタをボタンの上に移動させるとボタンの輪郭が浮き出ます。

mat-stroked-button

ボタンの輪郭線が表示されるボタンです。mat-buttonとの違いはそれだけです。
ちなみにこちらもマウスポインタをボタンの上に移動させると、色が変わります。

mat-flat-button

白いボタンです。mat-buttonと同様に輪郭線はありません。
ただし、こちらはマウスポインタによって色が変わったりすることはありません。

mat-raised-button

こちらも白いボタンですが、影を付けてくれているので立体感があります。
これもマウスポインタによって色が変わることはありません。

mat-icon-button

アイコンを使ったボタンです。ちなみに<button mat-icon-button>だけではアイコンにならないので、この内側にアイコンを用意します。
今回は<mat-icon>schedule</mat-icon>を使ってスケジュールのアイコンを表示しました。
他にもたくさんアイコンは用意されているので、こちらを参考に好きなアイコンを使ってみてください。

https://fonts.google.com/icons?selected=Material+Icons

mat-fab

円形のボタンになります。スマホアプリとかでよく使われていますね。

mat-mini-fab

mat-fabを小さくしたボタンです。大きさ以外の違いはありません。

終わりに

今回Angular Materialを使ったボタンの作り方を紹介していきました。
これを使わなくても処理的には一切関係はないですが、少し画面をかっこよくしたいときには是非使ってみてください。

スポンサーリンク

Angular開発

Posted by 社畜林檎