見やすいデザインを簡単に実現！ Angular Materialの使い方

#JavaScript

記事をシェア：

コピー

こんにちは。昼間です。

前回、Angular Materialのインストール方法をご紹介しました。
見やすいデザインを実現！Angular Materialのインストール方法

今回は、Angular Materialを使ったデザインの作り方をご紹介します。15分程度でデザイン作成ができます。

説明時の環境

今回の説明で使用している環境は以下のとおりです。

OS: Windows 10 Pro 64ビット
Angular: 13.0.0
Angular Material: 14.1.2

Angular Materialのインストールで変更されたファイル

Angular Materialのインストールが完了すると、4つのファイルがアップデートされます。1つ目がangular.jsonファイルです。

stylesにインストール時に選択したテーマ「indigo-pink.css」が追加されています。

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

2つ目がpackage.jsonファイルです。

@angular/animations、dependenciesに@angular/cdk、@angular/materialが追加されました。

"dependencies": {
  "@angular/animations": "^14.1.0",
  "@angular/cdk": "^14.1.2",
  "@angular/material": "^14.1.2",
},

3つ目がindex.htmlファイルです。フォントとアイコンが追加されました。

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

4つ目がstyles.cssファイルです。以下のようにスタイルが追加されました。

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

Angular Materialを使用したデザインの作成方法

Angular Materialを使用してデザインを作成していきます。

まずは、Angular materialの公式HPで自分の使いたいコンポーネントのページを見つけます。コンポーネント一覧はこちらです。

Angular Materialの公式サイト

今回はButtonのコンポーネントを例に作成してみます。

ページ内の上部にOVERVIEW／API／EXAMPLEという３つのタブがあります。この中からAPIのタブを開きます。

APIのページにAPI reference for Angular Material buttonとあり、その下にインポートするコードが書いてるので、コードをコピーしてapp.module.tsファイルにコードを貼り付けます。

import {MatButtonModule} from ‘@angular/material/button’;

次に、EXAMPLEのタブを開きます。ページ内にはMatButtonModuleを使ったデザイン例が沢山あります。

その中から、自分の使いたいデザインを見つけて、枠内右上にある「＜＞（View code）」を選択します。

すると、HTML／CSS／Typescriptのそれぞれのコードが出てくるので、コピーして自分のプロジェクトに合わせて貼り付けます。

上記のようにボタンが表示されれば成功です。