Cheatography
https://cheatography.com
Tags for Angular Material 2
LinksMain Site | | Git Hub Site | | Getting Started | | Material Design Icons | |
Setup1. Install Node.js and NPM
https://nodejs.org/en/download/
2. Install Angular CLI to global cache
npm install -g @angular/cli
3. Create project using Angular CLI
ng new <project-name>
4. Install Angular Material 2 to the project directory
npm install --save @angular/material |
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<mdcheckbox>Completed</md-checkbox>
|
ButtonsFlat Button | <button md-button>Flat button</button> | Raided Button | <button md-raised-button>Raised button</button> | Fab Icon | <button md-fab><md-icon>add</md-icon></button> | Mini Fab Icon | <button md-mini-fab><md-icon>add</md-icon></button> | Link Button | <a md-button routerLink=".">Flat Link</a> | Raised Link Button | <a md-raised-button routerLink=".">Raised Link</a> | Fab Link Icon | <a md-fab routerLink="."><md-icon>add</md-icon></a> | Fab Mini Link Icon | <a md-mini-fab routerLink="."><md-icon>add</md-icon></a> |
IndicatorsIcon | <md-icon>home</md-icon> | Spinner | <md-spinner></md-spinner> | Progress Bar | <md-progress-bar mode="indeterminate"></md-progress-bar> | Tool Tip | <span mdTooltip="Hello!">I have a tooltip</span> |
|
Created By
www.kellermansoftware.com
Metadata
Favourited By
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets
More Cheat Sheets by GregFinzer