diff --git a/angular-cli.json b/angular-cli.json
index 3f98ff5a5731ae08ed27b83f0c32a346354699a0..d95e474960736f82cdf970eef00f46ccb880ef8e 100644
--- a/angular-cli.json
+++ b/angular-cli.json
@@ -20,7 +20,8 @@
"styles": [
"styles.sass"
],
- "scripts": [],
+ "scripts": [
+ ],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
@@ -28,8 +29,10 @@
}
}
],
- "addons": [],
- "packages": [],
+ "addons": [
+ ],
+ "packages": [
+ ],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
diff --git a/package.json b/package.json
index db717d468cd8b6808bf0b03209cc606025d8aa49..e8861125cc03cf34a60f9f61ce70b871f12ef65f 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
"@angular/core": "~2.1.0",
"@angular/forms": "~2.1.0",
"@angular/http": "~2.1.0",
+ "@angular/material": "^2.0.0-alpha.10",
"@angular/platform-browser": "~2.1.0",
"@angular/platform-browser-dynamic": "~2.1.0",
"@angular/router": "~3.1.0",
@@ -27,7 +28,7 @@
},
"devDependencies": {
"@types/jasmine": "^2.2.30",
- "@types/node": "^6.0.42",
+ "@types/node": "^6.0.46",
"angular-cli": "1.0.0-beta.19-3",
"codelyzer": "1.0.0-beta.1",
"jasmine-core": "2.4.1",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index b6931b538a2c5989bfedffeef51a11abadd6df58..afe68be25fce18b9de4e70edab19dbe624f378bd 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1,136 @@
-<h1>
- {{title}}
-</h1>
+<md-sidenav-layout [class.m2app-dark]="isDarkTheme">
+
+ <md-sidenav #sidenav mode="side" class="app-sidenav">
+ Sidenav
+ </md-sidenav>
+
+ <md-toolbar color="primary">
+ <button class="app-icon-button" (click)="sidenav.toggle()">
+ <i class="material-icons app-toolbar-menu">menu</i>
+ </button>
+
+ Angular Material2 Example App
+
+ <span class="app-toolbar-filler"></span>
+ <button md-button (click)="isDarkTheme = !isDarkTheme">TOGGLE DARK THEME</button>
+ </md-toolbar>
+
+ <div class="app-content">
+
+ <md-card>
+ <button md-button>FLAT</button>
+ <button md-raised-button md-tooltip="This is a tooltip!">RAISED</button>
+ <button md-raised-button color="primary">PRIMARY RAISED</button>
+ <button md-raised-button color="accent">ACCENT RAISED</button>
+ </md-card>
+
+ <md-card>
+ <md-checkbox>Unchecked</md-checkbox>
+ <md-checkbox [checked]="true">Checked</md-checkbox>
+ <md-checkbox [indeterminate]="true">Indeterminate</md-checkbox>
+ <md-checkbox [disabled]="true">Disabled</md-checkbox>
+ </md-card>
+
+ <md-card>
+ <md-radio-button name="symbol">Alpha</md-radio-button>
+ <md-radio-button name="symbol">Beta</md-radio-button>
+ <md-radio-button name="symbol" disabled>Gamma</md-radio-button>
+ </md-card>
+
+ <md-card class="app-input-section">
+ <md-input placeholder="First name"></md-input>
+
+ <md-input #nickname placeholder="Nickname" maxlength="50">
+ <md-hint align="end">
+ {{nickname.characterCount}} / 50
+ </md-hint>
+ </md-input>
+
+ <md-input>
+ <md-placeholder>
+ <i class="material-icons app-input-icon">android</i> Favorite phone
+ </md-placeholder>
+ </md-input>
+
+ <md-input placeholder="Motorcycle model">
+ <span md-prefix>
+ <i class="material-icons app-input-icon">motorcycle</i>
+
+ </span>
+ </md-input>
+ </md-card>
+
+ <md-card>
+ <md-list class="app-list">
+ <md-list-item *ngFor="let food of foods">
+ <h3 md-line>{{food.name}}</h3>
+ <p md-line class="demo-secondary-text">{{food.rating}}</p>
+ </md-list-item>
+ </md-list>
+ </md-card>
+
+ <md-card>
+ <md-spinner class="app-spinner"></md-spinner>
+ <md-spinner color="accent" class="app-spinner"></md-spinner>
+ </md-card>
+
+ <md-card>
+ <label>
+ Indeterminate progress-bar
+ <md-progress-bar
+ class="app-progress"
+ mode="indeterminate"
+ aria-label="Indeterminate progress-bar example"></md-progress-bar>
+ </label>
+
+ <label>
+ Determinate progress bar - {{progress}}%
+ <md-progress-bar
+ class="app-progress"
+ color="accent"
+ mode="determinate"
+ [value]="progress"
+ aria-label="Determinate progress-bar example"></md-progress-bar>
+ </label>
+ </md-card>
+
+ <md-card>
+ <md-tab-group>
+ <md-tab label="Earth">
+ <p>EARTH</p>
+ </md-tab>
+ <md-tab label="Fire">
+ <p>FIRE</p>
+ </md-tab>
+ </md-tab-group>
+ </md-card>
+
+ <md-card>
+ <md-icon>build</md-icon>
+ </md-card>
+
+ <md-card>
+ <button md-button [md-menu-trigger-for]="menu">
+ MENU
+ </button>
+ </md-card>
+
+ <md-menu #menu="mdMenu">
+ <button md-menu-item>Lemon</button>
+ <button md-menu-item>Lime</button>
+ <button md-menu-item>Banana</button>
+ </md-menu>
+
+ <md-card>
+ <p>Last dialog result: {{lastDialogResult}}</p>
+ <button md-raised-button (click)="openDialog()">DIALOG</button>
+ <button md-raised-button (click)="showSnackbar()">SNACKBAR</button>
+ </md-card>
+
+ </div>
+
+</md-sidenav-layout>
+
+<span class="app-action" [class.m2app-dark]="isDarkTheme">
+ <button md-fab><md-icon>check circle</md-icon></button>
+</span>
diff --git a/src/app/app.component.sass b/src/app/app.component.sass
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6f921d22976f599cac0d1813504a1b89070e3bf6
--- /dev/null
+++ b/src/app/app.component.scss
@@ -0,0 +1,96 @@
+@import '~@angular/material/core/theming/all-theme';
+
+// NOTE: Theming is currently experimental and not yet publically released!
+
+@include md-core();
+
+$primary: md-palette($md-deep-purple);
+$accent: md-palette($md-amber, A200, A100, A400);
+
+$theme: md-light-theme($primary, $accent);
+
+@include angular-material-theme($theme);
+
+.m2app-dark {
+ $dark-primary: md-palette($md-pink, 700, 500, 900);
+ $dark-accent: md-palette($md-blue-grey, A200, A100, A400);
+ $dark-warn: md-palette($md-deep-orange);
+
+ $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);
+
+ @include angular-material-theme($dark-theme);
+}
+
+md-sidenav-layout.m2app-dark {
+ background: black;
+}
+
+.app-content {
+ padding: 20px;
+}
+
+.app-content md-card {
+ margin: 20px;
+}
+
+.app-sidenav {
+ padding: 10px;
+ min-width: 100px;
+}
+
+.app-content md-checkbox {
+ margin: 10px;
+}
+
+.app-toolbar-filler {
+ flex: 1 1 auto;
+}
+
+.app-toolbar-menu {
+ padding: 0 14px 0 14px;
+ color: white;
+}
+
+.app-icon-button {
+ box-shadow: none;
+ user-select: none;
+ background: none;
+ border: none;
+ cursor: pointer;
+ filter: none;
+ font-weight: normal;
+ height: auto;
+ line-height: inherit;
+ margin: 0;
+ min-width: 0;
+ padding: 0;
+ text-align: left;
+ text-decoration: none;
+}
+
+.app-action {
+ display: inline-block;
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+}
+
+.app-spinner {
+ height: 30px;
+ width: 30px;
+ display: inline-block;
+}
+
+.app-input-icon {
+ font-size: 16px;
+}
+
+.app-list {
+ border: 1px solid rgba(0,0,0,0.12);
+ width: 350px;
+ margin: 20px;
+}
+
+.app-progress {
+ margin: 20px;
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 60a777b71bd186640ccbd3f360a6b59c1ad586d2..5848d56fc009b38d6c2e81f30c5ac224243f3ea2 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,10 +1,57 @@
-import { Component } from '@angular/core';
+import {Component, Optional} from '@angular/core';
+import {MdDialog, MdDialogRef, MdSnackBar} from '@angular/material';
+
@Component({
selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.sass']
+ templateUrl: 'app.component.html',
+ styleUrls: ['app.component.scss'],
})
export class AppComponent {
- title = 'app works!';
+ isDarkTheme: boolean = false;
+ lastDialogResult: string;
+
+ foods: any[] = [
+ {name: 'Pizza', rating: 'Excellent'},
+ {name: 'Burritos', rating: 'Great'},
+ {name: 'French fries', rating: 'Pretty good'},
+ ];
+
+ progress: number = 0;
+
+ constructor(private _dialog: MdDialog, private _snackbar: MdSnackBar) {
+ // Update the value for the progress-bar on an interval.
+ setInterval(() => {
+ this.progress = (this.progress + Math.floor(Math.random() * 4) + 1) % 100;
+ }, 200);
+ }
+
+ openDialog() {
+ let dialogRef = this._dialog.open(DialogContent);
+
+ dialogRef.afterClosed().subscribe(result => {
+ this.lastDialogResult = result;
+ })
+ }
+
+ showSnackbar() {
+ this._snackbar.open('YUM SNACKS', 'CHEW');
+ }
+}
+
+
+@Component({
+ template: `
+ <p>This is a dialog</p>
+ <p>
+ <label>
+ This is a text box inside of a dialog.
+ <input #dialogInput>
+ </label>
+ </p>
+ <p> <button md-button (click)="dialogRef.close(dialogInput.value)">CLOSE</button> </p>
+ `,
+})
+export class DialogContent {
+ constructor(@Optional() public dialogRef: MdDialogRef<DialogContent>) { }
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 67ae49119baa632d3c92a74364eddb6a32cbdd8e..a765876e25b4d19359d4c7f8058761693cadfeb1 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,20 +1,19 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {MaterialModule} from '@angular/material';
+import {AppComponent, DialogContent} from './app.component';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
-import { AppComponent } from './app.component';
-
@NgModule({
- declarations: [
- AppComponent
- ],
imports: [
BrowserModule,
FormsModule,
- HttpModule
+ HttpModule,
+ MaterialModule.forRoot(),
],
- providers: [],
- bootstrap: [AppComponent]
+ declarations: [AppComponent, DialogContent],
+ entryComponents: [DialogContent],
+ bootstrap: [AppComponent],
})
export class AppModule { }
diff --git a/src/tsconfig.json b/src/tsconfig.json
index 9b4c84cf7bc8d0844aa7cc4e3b7689c1cb40c9f1..d047156a6b2ca1d35855bc98682e78b36509fa6d 100644
--- a/src/tsconfig.json
+++ b/src/tsconfig.json
@@ -12,6 +12,10 @@
"target": "es5",
"typeRoots": [
"../node_modules/@types"
+ ],
+ "types": [
+ "hammerjs",
+ "node"
]
}
}