feat(examples): add button basic usage

justindujardin · Dec 14, 2015 · c456f27 · c456f27
1 parent ac175dd
commit c456f27
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 0 deletions.
diff --git a/examples/all.ts b/examples/all.ts
@@ -8,6 +8,7 @@ import {CONST_EXPR, Type} from 'angular2/src/facade/lang';
 // --=> EXAMPLES_IMPORT_START
 import CardBasicUsage from './components/card/basic_usage';
 import CardInlineActions from './components/card/inline_actions';
+import ButtonBasicUsage from './components/button/basic_usage';
 import CardActionButtons from './components/card/action_buttons';
 import ToolbarBasicUsage from './components/toolbar/basic_usage';
 import ProgressCircularBasicUsage from './components/progress_circular/basic_usage';
@@ -22,6 +23,7 @@ import SwitchBasicUsage from './components/switch/basic_usage';
 export const DEMO_DIRECTIVES: Type[] = CONST_EXPR([
 // --=> EXAMPLES_EXPORT_START
   CardBasicUsage, CardInlineActions, CardActionButtons,
+  ButtonBasicUsage,
   RadioBasicUsage,
   SwitchBasicUsage,
   ToolbarBasicUsage,

diff --git a/examples/components/button/basic_usage.html b/examples/components/button/basic_usage.html
@@ -0,0 +1,83 @@
+
+<md-content>
+
+  <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
+    <button md-button>{{title1}}</button>
+    <button md-button md-no-ink class="md-primary">Primary (md-noink)</button>
+    <button md-button disabled="true" class="md-primary">Disabled</button>
+    <button md-button class="md-warn">{{title4}}</button>
+    <div class="label">Flat</div>
+  </section>
+
+  <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
+    <button md-raised-button class="md-raised">Button</button>
+    <button md-raised-button class="md-raised md-primary">Primary</button>
+    <button md-raised-button disabled="true" class="md-raised md-primary">Disabled</button>
+    <button md-raised-button class="md-raised md-warn">Warn</button>
+    <div class="label">Raised</div>
+  </section>
+
+  <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
+      <button md-fab class="md-fab" aria-label="Eat cake">
+          <i md-icon>cake</i>
+      </button>
+
+      <button md-fab class="md-primary" aria-label="Use Android">
+        <i md-icon>android</i>
+      </button>
+
+      <button md-fab disabled="true" aria-label="Comment">
+          <i md-icon>comment</i>
+      </button>
+
+      <button md-fab class="md-primary md-hue-2" aria-label="Profile">
+          <i md-icon>people</i>
+      </button>
+
+      <button md-fab class="md-mini" aria-label="Eat cake">
+          <i md-icon>cake</i>
+      </button>
+
+      <button md-fab class="md-mini md-primary" aria-label="Use Android">
+        <i md-icon>android</i>
+      </button>
+    <div class="label">FAB</div>
+  </section>
+
+  <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
+      <a md-button [href]="googleUrl" target="_blank">Default Link</a>
+      <a md-button class="md-primary" [href]="googleUrl" target="_blank">Primary Link</a>
+
+      <button md-button>Default Button</button>
+    <div class="label">Link vs. Button</div>
+  </section>
+
+  <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
+    <button md-button class="md-primary md-hue-1">Primary Hue 1</button>
+    <button md-raised-button class="md-warn md-hue-2">Warn Hue 2</button>
+    <button md-button class="md-accent">Accent</button>
+    <button md-raised-button class="md-accent md-hue-1">Accent Hue 1</button>
+    <div class="label">Themed</div>
+  </section>
+
+  <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
+    <button md-button class="md-icon-button md-primary" aria-label="Settings">
+      <i md-icon>menu</i>
+    </button>
+    <button md-button class="md-icon-button md-accent" aria-label="Favorite">
+      <i md-icon>favorite</i>
+    </button>
+    <button md-button class="md-icon-button" aria-label="More">
+      <i md-icon>more_vert</i>
+    </button>
+    <a md-button href="http://google.com"
+               title="Launch Google.com in new window"
+               target="_blank"
+               disabled="true"
+               aria-label="Google.com"
+               class="md-icon-button launch" >
+      <i md-icon>launch</i>
+    </a>
+    <div class="label">Icon Button</div>
+  </section>
+</md-content>
diff --git a/examples/components/button/basic_usage.scss b/examples/components/button/basic_usage.scss
@@ -0,0 +1,22 @@
+section {
+  background: #f7f7f7;
+  border-radius: 3px;
+  text-align: center;
+  margin: 1em;
+  position: relative !important;
+  padding-bottom: 10px;
+}
+md-content {
+  margin-right: 7px;
+}
+section .md-button {
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+.label {
+  position: absolute;
+  bottom: 5px;
+  left: 7px;
+  font-size: 14px;
+  opacity: 0.54;
+}
diff --git a/examples/components/button/basic_usage.ts b/examples/components/button/basic_usage.ts
@@ -0,0 +1,17 @@
+import {View, Component} from 'angular2/core';
+import {MATERIAL_DIRECTIVES} from '../../base';
+
+
+@Component({selector: 'button-basic-usage'})
+@View({
+  templateUrl: 'examples/components/button/basic_usage.html',
+  styleUrls: ['examples/components/button/basic_usage.css'],
+  directives: [MATERIAL_DIRECTIVES]
+})
+export default class ButtonBasicUsage {
+  googleUrl: string = 'https://www.google.com';
+  title1: string = 'Button';
+  title4: string = 'Warn';
+  isDisabled: boolean = true;
+
+}