Add example components (#45)

Author: jelbourn

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 renamed to 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>