Help us understand the problem. What is going on with this article?

Angularよく知らんけどAngular Material触ってみた

More than 1 year has passed since last update.

Angularよく知らんけどAngular Material触ってみた

by 8845musign
1 / 20

フロントエンドLT飲み会@表参道で発表させていただいた資料です

自己紹介

  • 横内宏樹
  • チームスピリットデザイナー
  • 仕事とは別に趣味でサービス開発(AngularJS)を手伝っている

本業Reactマン、雰囲気で(片手間で)AngularJSを書いている(^p^)


Angular Material

  • Material Designに沿って開発されたUIコンポーネント
  • Material Designに忠実?
  • Angular Teamによって開発されている

 なぜ気になったのか

  • 手伝ってるサービス、BootstrapからMaterial Designへ移行したいと言われた
  • ReactではMaterial UIを試食済み、辛かった。Angular Materialはどんな感じ?

今回お話すること

  • 適当に簡単に画面作ってみた
  • やり方まとめて見た
    • AngularJSしらなくても適当に触れるようなチュートリアルになるようまとめた

チュートリアル

サンプルリポジトリ


こんな画面をつくりました(デモ)


プロジェクト作成

Angular CLIを前提とします。

npm install -g @angular/cli
ng new example-angular-material && cd example-angular-material

Angular Material 導入

本体
npm install --save @angular/material @angular/cdk
Animations 
npm install --save @angular/animations
Gesture用プラグイン
npm install --save hammerjs


theme読み込み

style.cssからprebuildされて用意されたthemeをimportする

src/style.css
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

themeは4種用意されています

  • deeppurple-amber.css
  • indigo-pink.css
  • pink-bluegrey.css
  • purple-green.css

themeをカスタマイズすることも可能です。詳しくは公式のドキュメント


ICONの読み込み

index.htmlから読み込んでおきます

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

Fontの読み込み

src/index.html
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">


コンポーネントのimport

src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import 'hammerjs';
import {
  MatAutocompleteModule,
  // ... Componentのimport
} from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatAutocompleteModule,
    // ... Componentのimport
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

HTML記述抜粋

全体はこちらのGithubページ

<mat-card class="exapmle-card">
  <h2 class="mat-h2">Exapmle Data</h2>

  <mat-form-field>
    <input matInput placeholder="Input">
  </mat-form-field>

  <div class="radio-group">
    <label class="radio-group-label">Float label</label>
    <mat-radio-group>
      <mat-radio-button value="1">Option 1</mat-radio-button>
      <mat-radio-button value="2">Option 2</mat-radio-button>
    </mat-radio-group>
  </div>

  <button mat-raised-button color="primary">Search</button>
</mat-card>

立ち上げ

ng serve

触った感想 1

  • CSS、めっちゃ書く
  • あくまでコンポーネントライブラリ
    • 便利なUtility CSSなどない
  • サイズの調整オプションなどほとんど無い
  • パーツが少ない

触った感想 2

  • コンポーネント同士を合わせて配置した場合に、いい感じにデザインを変えたり、レイアウトしてはくれることが少ない
  • コンポーネントごとの完成度は高いと感じる、コードはきれい
  • あくまでコンポーネントとして取り入れるつもりなら良さそう
  • Material Designの再現度は高い (と思う)

Material Designは楽しい


ご清聴ありがとうございました

8845musign
UIを作りたい
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away