AngularMaterial2入門

提供:Dev Guides
移動先:案内検索

Angular Material 2は、マテリアルデザインコンポーネントをAngular2+アプリにもたらします。 このプロジェクトの目標は、コンポーネントの完全な配列を構築して、モバイルおよびデスクトップ用のマテリアルデザインインターフェイスを非常に簡単に構築できるようにすることです。

AngularMaterialの最新リリースはAngular4+に依存しています


AngularMaterial2の使用を開始する方法は次のとおりです。

1. npm installangular-material&hammerjs

まず、次のコマンドを使用して、プロジェクトにAngular Material、Angularアニメーション、およびHammer.jsをインストールします。

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

Hammer.js はオプションの依存関係であり、いくつかのコンポーネントのタッチサポートに役立ちます。

2. angle-cli.json

Hammer.js を使用することにし、 Angle CLI でプロジェクトを開始した場合は、angle-cli.jsonファイルを次のように変更します。 Hammer.jsライブラリを追加します。 Json *“ scripts” *配列を探し、hammer.jsに次のパスを追加します。

angle-cli.json

"scripts": [
  "../node_modules/hammerjs/hammer.min.js"
],

angle-cli.jsonへの変更を有効にするには、ローカルサーバーを再起動する必要がある場合があります。

3. カスタムマテリアルモジュール

Angular Material 2 Beta 3より前は、コンポーネントを利用可能にするためにアプリモジュールにインポートできるグローバルMaterialModuleがありました。 その欠点は、ツリーシェーキングが未使用のコードをすべて削除するほど効率的ではないことです。

したがって、 MaterialModule は廃止され、必要なコンポーネントのみをインポートおよびエクスポートするプロジェクト固有のカスタムマテリアルモジュールを定義できるようになりました。 モジュールは次のようになります。

Material.module.ts

import { NgModule } from '@angular/core';

import {
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule
} from '@angular/material';

@NgModule({
  imports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ],
  exports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ]
})
export class MaterialModule {}

次に、このモジュールをルートアプリモジュールにインポートします。

4. アプリモジュールにAngularMaterialを追加する

MaterialModuleをインポートし、インポートに追加します。 また、モジュール内のアニメーションに必要なものをインポートする必要があります。 アプリモジュール(例: app.module.ts )は、次のようになります。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from './material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

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

5. 作成済みのテーマとマテリアルアイコンをインポートします

AngularMaterialで自動的にインストールされるビルド済みのテーマがいくつかあります。 これらは色と基本的なスタイリングを設定します。 利用可能なテーマは、インディゴピンクディープパープルアンバーパープルグリーンピンクブルーグレーです。

テーマをインポートするには、次のようなものをグローバルstyles.cssファイルに追加できます。

styles.css

@import '[email protected]/material/prebuilt-themes/indigo-pink.css';

また、にアクセスすることができますマテリアルデザインアイコン名前付きアイコンを成分。 それらをプロジェクトにインポートするには、これをプロジェクトのルートindex.htmlファイルのヘッドセクションに追加します。

index.html

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

6. Angular Materialの準備ができました!

これで、テンプレートで利用可能なAngularMaterialコンポーネントの使用を開始する準備が整いました。 たとえば、サンプルアプリのテンプレートのマークアップは次のとおりです。

<div>
  <mat-toolbar color="primary">
    <span><mat-icon>mood</mat-icon></span>

    <span>Yay, Material in Angular 2!</span>

    <button mat-icon-button [mat-menu-trigger-for]="menu">
      <mat-icon>more_vert</mat-icon>
    </button>
  </mat-toolbar>
  <mat-menu x-position="before" #menu="matMenu">
    <button mat-menu-item>Option 1</button>
    <button mat-menu-item>Option 2</button>
  </mat-menu>

  <mat-card>
    <button mat-button>All</button>
    <button mat-raised-button>Of</button>
    <button mat-raised-button color="primary">The</button>
    <button mat-raised-button color="accent">Buttons</button>
  </mat-card>

  <span class="done">
    <button mat-fab>
      <mat-icon>check circle</mat-icon>
    </button>
  </span>
</div>

これに、グローバルstyles.cssに次のCSSのみを追加しました。

styles.css

body {
  margin: 0;
  font-family: Roboto, sans-serif;
}

mat-card {
  max-width: 80%;
  margin: 2em auto;
  text-align: center;
}
mat-toolbar-row {
  justify-content: space-between;
}

サンプルアプリの外観は次のとおりです。

詳細はこちら

始めるのに役立ついくつかの投稿があります:

リソースとリンク