Angularマテリアルデザイン

AngularMaterial試す

概要

説明

  • Angularで表現したマテリアルデザイン
  • ちゃんとしたWWなんとかってデザイングループが作成しているので品質高い

インストール

  • いるもの
$ npm install --save @angular/cdk
$ npm install --save @angular/material @angular/animations
$ npm install --save hammerjs

作成物

  • appmodule.tsを作成
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
//追加インポート
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import 'hammerjs';
import {MatCheckboxModule,MatRadioModule,MatCardModule,MatInputModule} from '@angular/material';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCheckboxModule,
    MatRadioModule,
    MatCardModule,
    MatInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  • style.cssを作成
/*テーマ設定*/
@import '~@angular/material/prebuilt-themes/purple-green.css';
  • app.component.htmlを作成
<!-- CheckBox -->
<mat-card>
  <mat-card-content>
    <h2 class="example-h2">CheckBox</h2>
    <mat-checkbox class="example-margin">Checked</mat-checkbox>
  </mat-card-content>
</mat-card>

<!-- RadioButton -->
<mat-card>
  <mat-card-content>
    <h2 class="example-h2">RadioButton</h2>    
    <label class="example-margin">RadioButton:</label>
    <mat-radio-group>
      <mat-radio-button class="example-margin" value="start">RadioA</mat-radio-button>
      <mat-radio-button class="example-margin" value="end">RadioB</mat-radio-button>
    </mat-radio-group>
  </mat-card-content>
</mat-card>

<!-- TextBox・TextArea -->
<mat-card>
  <mat-card-content>
    <h2 class="example-h2">TextBox・TextArea</h2>
    <table class="example-full-width" cellspacing="0">
      <tr>
        <mat-input-container class="example-full-width">
          <input matInput placeholder="TextBox">  
        </mat-input-container>
      </tr>
      <tr>
        <mat-input-container class="example-full-width">
          <textarea matInput placeholder="TextArea"></textarea>
        </mat-input-container>
      </tr>
    </table>
  </mat-card-content>
</mat-card>
  • index.htmlにapp-rootいれるの忘れないで