AngularMaterial試す
概要
説明
- Angularで表現したマテリアルデザイン
- ちゃんとしたWWなんとかってデザイングループが作成しているので品質高い
インストール
$ npm install --save @angular/cdk
$ npm install --save @angular/material @angular/animations
$ npm install --save hammerjs
作成物
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 { }
/*テーマ設定*/
@import '~@angular/material/prebuilt-themes/purple-green.css';
<!-- 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いれるの忘れないで