以下の内容はhttps://cheatography.com///gregfinzer/cheat-sheets/angular-material-2/より取得しました。


Cheatography

Angular Material 2 Cheat Sheet by

Tags for Angular Material 2

Links

Setup

1. Install Node.js and NPM
https:­//n­ode­js.o­rg­/en­/do­wnload/

2. Install Angular CLI to global cache
npm install -g @angul­ar/cli

3. Create project using Angular CLI
ng new <pr­oje­ct-­nam­e>

4. Install Angular Material 2 to the project directory
npm install --save @angul­ar/­mat­erial

Tab Layout

<md-card>
 <md-tab-group [selectedIndex]="0">
  <md-tab label="Breakfast">
   <h3>Breakfast option</h3>
   <p>Western Omlet</p>
  </md-tab>
  <md-tab label="Lunch">
   <h3>Lunch option</h3>
   <p>Salad</p>
  </md-tab>
  <md-tab label="Dinner">
   <h3>Dinner option</h3>
   <p>Tacos</p>
  </md-tab>
 </md-tab-group>
</md-card>

Card Layout

<md-card>
 <md-card-header>
  <md-card-title>Star Destroyer</md-card-title>
  <md-card-subtitle>Side: Empire</md-card-subtitle>
 </md-card-header>
 <md-card-content>
  A giant triangle ship
 </md-card-content>
</md-card>

Toolbar Navigation

<md-toolbar color="primary">
 <button md-raised-button color="accent">
  <i class="material-icons">home</i>
 </button>
 <button md-raised-button color="accent">
  About
 </button>
</md-toolbar>

Side Navigation

<md-sidenav-container class="example-container">
 <md-sidenav #sidenav class="example-sidenav">
  Testing
 </md-sidenav>

 <div class="example-sidenav-content">
  <button md-button (click)="sidenav.open()">
   Open
  </button>
 </div>
</md-sidenav-container>

Menu Navigation

<button md-raised-button [mdMenuTriggerFor]="menu">Menu</button>
<md-menu #menu="mdMenu">
 <button md-menu-item>Home</button>
 <button md-menu-item>FAQ</button>
 <button md-menu-item>Support</button>
</md-menu>
 

Input Text

<md-input-container>
  <input mdInput placeholder="To Do" value="Buy Bread">
</md-input-container>

Input Date

<md-input-container>
  <input mdInput placeholder="Due Date" type="Date">
</md-input-container>

Input Number

<md-input-container>
  <input mdInput placeholder=­"Priority" type="number" value="1">
</md-input-container>

Radio Button Control

<md-radio-group>
  <md-radio-button value="visa">Visa</md-radio-button>
  <md-radio-button value="mc">Mastercard</md-radio-button>
</md-radio-group>

Select Control

<md-radio-group>
  <md-radio-button value="visa">Visa</md-radio-button>
  <md-radio-button value="mc">Mastercard</md-radio-button>
</md-radio-group>

Checkbox Control

<md­checkbox­>Completed</md-checkbox>

Buttons

Flat Button
<button md-but­ton­>Flat button­</b­utt­on>
Raided Button
<button md-rai­sed­-bu­tto­n>R­aised button­</b­utt­on>
Fab Icon
<button md-fab­><m­d-i­con­>ad­d</­md-­ico­n><­/bu­tto­n>
Mini Fab Icon
<button md-min­i-f­ab>­<md­-ic­on>­add­</m­d-i­con­></­but­ton>
Link Button
<a md-button router­Lin­k="."­>­Flat Link</­a>
Raised Link Button
<a md-rai­sed­-button router­Lin­k="."­>­Raised Link</­a>
Fab Link Icon
<a md-fab router­Lin­k="."­>­<m­d-i­con­>ad­d</­md-­ico­n><­/a>
Fab Mini Link Icon
<a md-min­i-fab router­Lin­k="."­>­<m­d-i­con­>ad­d</­md-­ico­n><­/a>

Indicators

Icon
<md­-ic­on>­hom­e</­md-­ico­n>
Spinner
<md­-sp­inn­er>­</m­d-s­pin­ner>
Progress Bar
<md­-pr­ogr­ess-bar mode="i­nde­ter­min­ate­"­></­md-­pro­gre­ss-­bar>
Tool Tip
<span mdTool­tip­="He­llo­!">I have a toolti­p</­spa­n>
 

Comments

No comments yet. Add yours below!

Add a Comment

Related Cheat Sheets

Regular Expressions Cheat Sheet
Python Cheat Sheet
Angular Cheat Sheet

More Cheat Sheets by GregFinzer

Loving Your Neighbor Cheat Sheet
AWS Core Service Options Cheat Sheet
Unity Container Cheat Sheet



以上の内容はhttps://cheatography.com///gregfinzer/cheat-sheets/angular-material-2/より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14