Add example components

src/app/examples/button-toggle-exclusive/button-toggle-exclusive-example.css

@@ -0,0 +1,3 @@
+.example-selected-value {
+  margin: 15px 0;
+}

src/app/examples/button-toggle-exclusive/button-toggle-exclusive-example.html

@@ -0,0 +1,15 @@
+<md-button-toggle-group #group="mdButtonToggleGroup">
+  <md-button-toggle value="left">
+    <md-icon>format_align_left</md-icon>
+  </md-button-toggle>
+  <md-button-toggle value="center">
+    <md-icon>format_align_center</md-icon>
+  </md-button-toggle>
+  <md-button-toggle value="right">
+    <md-icon>format_align_right</md-icon>
+  </md-button-toggle>
+  <md-button-toggle value="justify" disabled>
+    <md-icon>format_align_justify</md-icon>
+  </md-button-toggle>
+</md-button-toggle-group>
+<div class="example-selected-value">Selected value: {{group.value}}</div>

src/app/examples/button-toggle-exclusive/button-toggle-exclusive-example.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'button-toggle-exclusive-example',
+  templateUrl: './button-toggle-exclusive-example.html',
+  styleUrls: ['./button-toggle-exclusive-example.css'],
+})
+export class ButtonToggleExclusiveExample {}

src/app/examples/button-toggle-overview/button-toggle-overview-example.html

@@ -0,0 +1 @@
+<md-button-toggle>Toggle me!</md-button-toggle>

src/app/examples/button-toggle-overview/button-toggle-overview-example.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'button-toggle-overview-example',
+  templateUrl: './button-toggle-overview-example.html',
+})
+export class ButtonToggleOverviewExample {}

src/app/examples/button-types/button-types-example.scss → src/app/examples/button-types/button-types-example.css

@@ -1,8 +1,8 @@
-.example {
+.example-container {
   width: 500px;
 }
 
-.button-row {
+.example-button-row {
   display: flex;
   align-items: center;
   justify-content: space-around;

src/app/examples/button-types/button-types-example.html

@@ -1,4 +1,4 @@
-<div class="example">
+<div class="example-container">
   <h3>Normal Buttons</h3>
   <div class="button-row">
     <button md-button>Flat button</button>
@@ -8,7 +8,7 @@ <h3>Normal Buttons</h3>
   </div>
 
   <h3>Link Buttons</h3>
-  <div class="button-row">
+  <div class="example-button-row">
     <a md-button routerLink=".">Flat button</a>
     <a md-raised-button routerLink=".">Raised button</a>
     <a md-fab routerLink="."><md-icon>check</md-icon></a>

src/app/examples/button-types/button-types-example.ts

@@ -4,6 +4,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'button-types-example',
   templateUrl: './button-types-example.html',
-  styleUrls: ['./button-types-example.scss'],
+  styleUrls: ['./button-types-example.css'],
 })
 export class ButtonTypesExample {}

src/app/examples/card-fancy/card-fancy-example.css

@@ -0,0 +1,8 @@
+.example-card {
+  width: 400px;
+}
+
+.example-header-image {
+  background-image: url('shiba1.jpg');
+  background-size: cover;
+}

src/app/examples/card-fancy/card-fancy-example.html

@@ -0,0 +1,19 @@
+<md-card class="example-card">
+  <md-card-header>
+    <div md-card-avatar class="example-header-image"></div>
+    <md-card-title>Shiba Inu</md-card-title>
+    <md-card-subtitle>Dog Breed</md-card-subtitle>
+  </md-card-header>
+  <img md-card-image src="shiba2.jpg">
+  <md-card-content>
+    <p>
+      The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
+      A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
+      bred for hunting.
+    </p>
+  </md-card-content>
+  <md-card-actions>
+    <button md-button>LIKE</button>
+    <button md-button>SHARE</button>
+  </md-card-actions>
+</md-card>

src/app/examples/card-fancy/card-fancy-example.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'card-fancy-example',
+  templateUrl: './card-fancy-example.html',
+  styleUrls: ['./card-fancy-example.css'],
+})
+export class CardFancyExample {}

src/app/examples/card-overview/card-overview-example.html

@@ -0,0 +1 @@
+<md-card>Simple card</md-card>

src/app/examples/card-overview/card-overview-example.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'card-overview-example',
+  templateUrl: './card-overview-example.html',
+})
+export class CardOverviewExample {}

src/app/examples/checkbox-configurable/checkbox-configurable-example.css

@@ -0,0 +1,14 @@
+.example-h2 {
+  margin: 10px;
+}
+
+.example-section {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  height: 60px;
+}
+
+.example-margin {
+  margin: 0 10px;
+}

src/app/examples/checkbox-configurable/checkbox-configurable-example.html

@@ -0,0 +1,40 @@
+<md-card>
+  <md-card-content>
+    <h2 class="example-h2">Checkbox configuration</h2>
+
+    <section class="example-section">
+      <md-checkbox class="example-margin" [(ngModel)]="checked">Checked</md-checkbox>
+      <md-checkbox class="example-margin" [(ngModel)]="indeterminate">Indeterminate</md-checkbox>
+    </section>
+
+    <section class="example-section">
+      <label class="example-margin">Align:</label>
+      <md-radio-group [(ngModel)]="align">
+        <md-radio-button class="example-margin" value="start">Start</md-radio-button>
+        <md-radio-button class="example-margin" value="end">End</md-radio-button>
+      </md-radio-group>
+    </section>
+
+    <section class="example-section">
+      <md-checkbox class="example-margin" [(ngModel)]="disabled">Disabled</md-checkbox>
+    </section>
+  </md-card-content>
+</md-card>
+
+<md-card class="result">
+  <md-card-content>
+    <h2 class="example-h2">Result</h2>
+
+    <section class="example-section">
+      <md-checkbox
+          class="example-margin"
+          [checked]="checked"
+          [indeterminate]="indeterminate"
+          [align]="align"
+          [disabled]="disabled">
+        I'm a checkbox
+      </md-checkbox>
+    </section>
+  </md-card-content>
+</md-card>
+

src/app/examples/checkbox-configurable/checkbox-configurable-example.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'checkbox-configurable-example',
+  templateUrl: './checkbox-configurable-example.html',
+  styleUrls: ['./checkbox-configurable-example.css'],
+})
+export class CheckboxConfigurableExample {
+  checked = false;
+  indeterminate = false;
+  align = 'start';
+  disabled = false;
+}

src/app/examples/checkbox-overview/checkbox-overview-example.html

@@ -0,0 +1 @@
+<md-checkbox>Check me!</md-checkbox>

src/app/examples/checkbox-overview/checkbox-overview-example.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'checkbox-overview-example',
+  templateUrl: './checkbox-overview-example.html',
+})
+export class CheckboxOverviewExample {}

src/app/examples/dialog-overview/dialog-overview-example-dialog.html

@@ -0,0 +1 @@
+Hi, I'm a dialog!

src/app/examples/dialog-overview/dialog-overview-example.ts

@@ -0,0 +1,20 @@
+import {Component} from '@angular/core';
+import {MdDialog} from '@angular/material';
+
+
+@Component({
+  selector: 'dialog-overview-example',
+  template: '',
+})
+export class DialogOverviewExample {
+  constructor(dialog: MdDialog) {
+    dialog.open(DialogOverviewExampleDialog);
+  }
+}
+
+
+@Component({
+  selector: 'dialog-overview-example-dialog',
+  templateUrl: './dialog-overview-example-dialog.html',
+})
+export class DialogOverviewExampleDialog {}

src/app/examples/dialog-result/dialog-result-example-dialog.html

@@ -0,0 +1,6 @@
+<h1 md-dialog-title>Dialog</h1>
+<div md-dialog-content>What would you like to do?</div>
+<div md-dialog-actions>
+  <button md-button (click)="dialogRef.close('Option 1')">Option 1</button>
+  <button md-button (click)="dialogRef.close('Option 2')">Option 2</button>
+</div>

src/app/examples/dialog-result/dialog-result-example.html

@@ -0,0 +1,2 @@
+<button md-button (click)="openDialog()">Launch dialog</button>
+You chose: {{selectedOption}}

src/app/examples/dialog-result/dialog-result-example.ts

@@ -0,0 +1,29 @@
+import {Component} from '@angular/core';
+import {MdDialog, MdDialogRef} from '@angular/material';
+
+
+@Component({
+  selector: 'dialog-result-example',
+  templateUrl: './dialog-result-example.html',
+})
+export class DialogResultExample {
+  selectedOption: string;
+
+  constructor(public dialog: MdDialog) {}
+
+  openDialog() {
+    let dialogRef = this.dialog.open(DialogResultExampleDialog);
+    dialogRef.afterClosed().subscribe(result => {
+      this.selectedOption = result;
+    })
+  }
+}
+
+
+@Component({
+  selector: 'dialog-result-example-dialog',
+  templateUrl: './dialog-result-example-dialog.html',
+})
+export class DialogResultExampleDialog {
+  constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}
+}