docs(demo-app): Updated with our new directives and more sample code.…

… [ci skip]
trimox · Jul 3, 2017 · 80a0f5c · 80a0f5c
1 parent 257cb04
commit 80a0f5c
Show file tree

Hide file tree

Showing 10 changed files with 121 additions and 109 deletions.
diff --git a/src/demo-app/app/components/card-demo/card-demo.component.html b/src/demo-app/app/components/card-demo/card-demo.component.html
@@ -102,31 +102,23 @@ <h2 mdc-card-subtitle>Subtitle</h2>
 ]]></pre>
     </div>
     <div fxLayout="column">
-      <mdc-card class="demo-card">
+      <mdc-card [darkTheme]="true" [ngClass]="{'mdc-theme--dark demo-card' : true}">
         <mdc-card-primary>
-          <h1 mdc-card-title>Title</h1>
+          <h1 mdc-card-title>Dark Theme</h1>
           <h2 mdc-card-subtitle>Subtitle</h2>
         </mdc-card-primary>
-        <mdc-card-supporting-text>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        </mdc-card-supporting-text>
         <mdc-card-actions>
           <button mdc-button [cardAction]="true">Action 1</button>
           <button mdc-button [cardAction]="true">Action 2</button>
         </mdc-card-actions>
       </mdc-card>
       <pre class="prettyprint">
 <![CDATA[
-<mdc-card class="demo-card">
+<mdc-card [darkTheme]="true">
   <mdc-card-primary>
     <h1 mdc-card-title>Title</h1>
     <h2 mdc-card-subtitle>Subtitle</h2>
   </mdc-card-primary>
-  <mdc-card-supporting-text>
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  </mdc-card-supporting-text>
   <mdc-card-actions>
     <button mdc-button [cardAction]="true">Action 1</button>
     <button mdc-button [cardAction]="true">Action 2</button>
@@ -135,23 +127,31 @@ <h2 mdc-card-subtitle>Subtitle</h2>
 ]]></pre>
     </div>
     <div fxLayout="column">
-      <mdc-card [darkTheme]="true" [ngClass]="{'mdc-theme--dark demo-card' : true}">
+      <mdc-card class="demo-card">
         <mdc-card-primary>
-          <h1 mdc-card-title>Dark Theme</h1>
+          <h1 mdc-card-title>Title</h1>
           <h2 mdc-card-subtitle>Subtitle</h2>
         </mdc-card-primary>
+        <mdc-card-supporting-text>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </mdc-card-supporting-text>
         <mdc-card-actions>
           <button mdc-button [cardAction]="true">Action 1</button>
           <button mdc-button [cardAction]="true">Action 2</button>
         </mdc-card-actions>
       </mdc-card>
       <pre class="prettyprint">
 <![CDATA[
-<mdc-card [darkTheme]="true">
+<mdc-card class="demo-card">
   <mdc-card-primary>
     <h1 mdc-card-title>Title</h1>
     <h2 mdc-card-subtitle>Subtitle</h2>
   </mdc-card-primary>
+  <mdc-card-supporting-text>
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </mdc-card-supporting-text>
   <mdc-card-actions>
     <button mdc-button [cardAction]="true">Action 1</button>
     <button mdc-button [cardAction]="true">Action 2</button>

diff --git a/src/demo-app/app/components/checkbox-demo/checkbox-demo.component.html b/src/demo-app/app/components/checkbox-demo/checkbox-demo.component.html
@@ -21,6 +21,14 @@ <h1 mdc-typography-headline>API reference</h1>
             <td><pre class="prettyprint">@Input() id: string</pre></td>
             <td>Unique Id of the checkbox (auto generated if not supplied).</td>
           </tr>
+          <tr>
+            <td><pre class="prettyprint">@Input() name: string</pre></td>
+            <td>Name of the checkbox.</td>
+          </tr>
+          <tr>
+            <td><pre class="prettyprint">@Input() value: any</pre></td>
+            <td>Value of the checkbox.</td>
+          </tr>
           <tr>
             <td><pre class="prettyprint">@Input() ariaLabel: string</pre></td>
             <td>Used to set the 'aria-label' attribute on the underlying input element.</td>
@@ -65,15 +73,16 @@ <h1 mdc-typography-headline>Events</h1>
   <h1 mdc-typography-headline>Examples</h1>
   <div fxLayout="column" class="mdc-padding">
     <mdc-form-field>
-      <mdc-checkbox [(ngModel)]="isChecked" id="myCheckbox"></mdc-checkbox>
+      <mdc-checkbox [(ngModel)]="isChecked" id="myCheckbox" name="myName"></mdc-checkbox>
       <label>Checkbox value is {{isChecked}}</label>
     </mdc-form-field>
     <pre class="prettyprint">
-&lt;mdc-form-field&gt;
-  &lt;mdc-checkbox [(ngModel)]="isChecked" id="myCheckbox"&gt;&lt;/mdc-checkbox&gt;
-  &lt;label&gt;Checkbox label&lt;/label&gt;
-&lt;/mdc-form-field&gt;
-       </pre>
+<![CDATA[
+<mdc-form-field>
+  <mdc-checkbox [(ngModel)]="isChecked" id="myCheckbox" name="myName"></mdc-checkbox>
+  <label>My label</label>
+</mdc-form-field>
+]]></pre>
   </div>
   <div fxLayout="column" class="mdc-padding">
     <div fxFlexAlign="start">
@@ -84,11 +93,12 @@ <h1 mdc-typography-headline>Examples</h1>
     </div>
     <p>Indeterminate</p>
     <pre class="prettyprint">
-&lt;mdc-form-field&gt;
-  &lt;mdc-checkbox [indeterminate]="true"&gt;&lt;/mdc-checkbox&gt;
-  &lt;label&gt;Label&lt;/label&gt;
-&lt;/mdc-form-field&gt;
-       </pre>
+<![CDATA[
+<mdc-form-field>
+  <mdc-checkbox [indeterminate]="true"></mdc-checkbox>
+  <label>Indeterminate Checkbox</label>
+</mdc-form-field>
+]]></pre>
   </div>
   <div fxLayout="column" class="mdc-padding">
     <div fxFlexAlign="start">
@@ -97,12 +107,12 @@ <h1 mdc-typography-headline>Examples</h1>
         <label>Checkbox is disabled</label>
       </mdc-form-field>
     </div>
-    <p>Disabled</p>
     <pre class="prettyprint">
-&lt;mdc-form-field&gt;
-  &lt;mdc-checkbox [disabled]="true"&gt;&lt;/mdc-checkbox&gt;
-  &lt;label&gt;Label&lt;/label&gt;
-&lt;/mdc-form-field&gt;
-       </pre>
+<![CDATA[
+<mdc-form-field>
+  <mdc-checkbox [disabled]="true"></mdc-checkbox>
+  <label>Checkbox is disabled</label>
+</mdc-form-field>
+]]></pre>
   </div>
 </div>
diff --git a/src/demo-app/app/components/elevation-demo/elevation-demo.component.html b/src/demo-app/app/components/elevation-demo/elevation-demo.component.html
@@ -5,24 +5,16 @@ <h1 mdc-typography-display1>Elevation</h1>
   <h1 mdc-typography-headline>Usage</h1>
   <div>
     <pre class="prettyprint"><![CDATA[import { ElevationModule } from '@angular-mdc/web';]]></pre>
-  </div>
-  <h1 mdc-typography-headline>Examples</h1>
-  <p mdc-typography-subheading1>Usage: mdc-elevation-z0 -> mdc-elevation-z24</p>
-  <div fxLayout="column" fxLayoutAlign="start" class="mdc-padding">
-    <p mdc-elevation-z1>mdc-elevation-z1</p>
-    <pre class="prettyprint">
-<![CDATA[
-<h4 mdc-elevation-z1>mdc-elevation-z1</h4>
-]]></pre>
-    <p mdc-elevation-z2>mdc-elevation-z2</p>
     <pre class="prettyprint">
 <![CDATA[
-<h4 mdc-elevation-z2>mdc-elevation-z2</h4>
-]]></pre>
-    <p mdc-elevation-z3>mdc-elevation-z3</p>
-    <pre class="prettyprint">
-<![CDATA[
-<h4 mdc-elevation-z3>mdc-elevation-z3</h4>
+<div [mdc-elevation]="5"></div>
+
+<h1 mdc-typography-body2 [mdc-elevation]="2">Sample text</h1>
 ]]></pre>
   </div>
-</div>
+  <h1 mdc-typography-headline>Examples</h1>
+  <div fxLayout="row" fxLayoutWrap>
+    <figure [mdc-elevation]="i" class="demo-surface" *ngFor="let i of items">
+      <figcaption>mdc-elevation="{{i}}"</figcaption>
+    </figure>
+  </div>
diff --git a/src/demo-app/app/components/elevation-demo/elevation-demo.component.ts b/src/demo-app/app/components/elevation-demo/elevation-demo.component.ts
@@ -8,6 +8,8 @@ import {
 	templateUrl: './elevation-demo.component.html'
 })
 export class ElevationDemoComponent implements OnInit {
+  items = Array.from(Array(25), (x, i) => i);
+
   ngOnInit() {
     let doc = <HTMLDivElement>document.body;
     let script = document.createElement('script');

diff --git a/src/demo-app/app/components/menu-demo/menu-demo.component.html b/src/demo-app/app/components/menu-demo/menu-demo.component.html
@@ -74,7 +74,7 @@ <h1 mdc-typography-headline>API reference</h1>
   </div>
   <h1 mdc-typography-headline>Examples</h1>
   <div fxLayout="column" class="mdc-padding">
-    <p>Change opening point of the menu</p>
+    <p>Change opening point of menu (openFrom)</p>
     <div fxLayout="row">
       <mdc-form-field>
         <mdc-radio value="TOP_LEFT" (change)="handleChange();" name="radioGroup" [(ngModel)]="openingPoint"></mdc-radio>
@@ -93,7 +93,7 @@ <h1 mdc-typography-headline>Examples</h1>
         <label>Bottom Right</label>
       </mdc-form-field>
     </div>
-    <div fxLayout="row" class="mdc-padding">
+    <div fxLayout="column" class="mdc-padding">
       <div mdc-menu-anchor>
         <button mdc-fab (click)="showMenu();">
           <span mdc-fab-icon>person</span>

diff --git a/src/demo-app/app/components/navigation/navbar.component.html b/src/demo-app/app/components/navigation/navbar.component.html
@@ -1,11 +1,11 @@
 <mdc-toolbar [flexible]="false" [fixed]="true" [waterfall]="false" [fixedLastrow]="false" [flexibleTitle]="false">
   <mdc-toolbar-row>
     <mdc-toolbar-section [alignStart]="true">
-      <a href="#" class="material-icons mdc-toolbar__icon--menu" alt="Home">{{router.url == '/' ? 'menu' : 'arrow_back'}}</a>
+      <a href="#" class="material-icons" mdc-toolbar-icon-menu alt="Home">{{router.url == '/' ? 'menu' : 'arrow_back'}}</a>
       <mdc-toolbar-title>Angular MDC</mdc-toolbar-title>
     </mdc-toolbar-section>
     <mdc-toolbar-section [alignEnd]="true">
-      <a href="https://github.com/trimox/angular-mdc-web" alt="GitHub" class="material-icons mdc-toolbar__icon">
+      <a href="https://github.com/trimox/angular-mdc-web" alt="GitHub" mdc-toolbar-icon class="material-icons">
         <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" style="padding-right: 10px;">
           <title>github-circle-white-transparent</title>
           <path d="M10 0C4.477 0 0 4.477 0 10c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V19c0 .27.16.59.67.5C17.14 18.16 20 14.42 20 10A10 10 0 0 0 10 0z" fill="#FFF" fill-rule="evenodd" />

diff --git a/src/demo-app/app/components/textfield-demo/textfield-demo.component.html b/src/demo-app/app/components/textfield-demo/textfield-demo.component.html
@@ -29,6 +29,10 @@ <h1 mdc-typography-headline>API reference</h1>
             <td><pre class="prettyprint">@Input() type: string = 'text'</pre></td>
             <td>Input type of textfield (e.g. email, password, url).</td>
           </tr>
+          <tr>
+            <td><pre class="prettyprint">@Input() name: string</pre></td>
+            <td>Name of the textfield.</td>
+          </tr>
           <tr>
             <td><pre class="prettyprint">@Input() value: string</pre></td>
             <td>The input element's value.</td>
@@ -113,16 +117,17 @@ <h1 mdc-typography-headline>Events</h1>
   <h1 mdc-typography-headline>Examples</h1>
   <div fxLayout="column" class="mdc-padding">
     <div fxFlexAlign="start">
-      <mdc-textfield #user [(ngModel)]="username" id="username" label="Username" required [disabled]="isDisabled" aria-controls="help-username-val" (focus)="handleFocus($event);" (blur)="handleBlur($event);" (input)="handleInput($event);" (keydown)="handleKeyDown($event);">
+      <mdc-textfield [(ngModel)]="username" id="username" label="Username" required [disabled]="isDisabled" aria-controls="help-username-val">
       </mdc-textfield>
       <p mdc-textfield-helptext id="help-username-val" [validation]="true" [persistent]="false">Username is required</p>
     </div>
-      <mdc-form-field>
-        <mdc-checkbox [(ngModel)]="isDisabled"></mdc-checkbox>
-        <label>Disable textfield</label>
-      </mdc-form-field>
+    <mdc-form-field>
+      <mdc-checkbox [(ngModel)]="isDisabled"></mdc-checkbox>
+      <label>Disable textfield</label>
+    </mdc-form-field>
     <pre class="prettyprint">
-&lt;mdc-textfield [(ngModel)]="username"
+<![CDATA[
+<mdc-textfield [(ngModel)]="username"
   id="username"
   label="Username"
   required
@@ -131,13 +136,22 @@ <h1 mdc-typography-headline>Examples</h1>
   (focus)="handleFocus($event);"
   (blur)="handleBlur($event);"
   (input)="handleInput($event);"
-  (keydown)="handleKeyDown($event);"&gt;
-&lt;/mdc-textfield&gt;
-&lt;p mdc-textfield-helptext
-  id="help-username-val"
+  (keydown)="handleKeyDown($event);"></mdc-textfield>
+<p mdc-textfield-helptext id="help-username-val"
   [validation]="true"
-  [persistent]="false">Username is required&lt;/p&gt;
-      </pre>
+  [persistent]="false">Username is required</p>
+]]></pre>
+  </div>
+  <div fxLayout="column" class="mdc-padding">
+    <div fxFlexAlign="start" class="mdc-padding" mdc-theme-dark>
+      <mdc-textfield label="Dark theme"></mdc-textfield>
+    </div>
+    <pre class="prettyprint">
+<![CDATA[
+<div mdc-theme-dark>
+  <mdc-textfield label="Dark theme"></mdc-textfield>
+</div>
+]]></pre>
   </div>
   <div fxLayout="column" class="mdc-padding">
     <div fxFlexAlign="start">

diff --git a/src/demo-app/app/components/textfield-demo/textfield-demo.component.ts b/src/demo-app/app/components/textfield-demo/textfield-demo.component.ts
@@ -13,10 +13,6 @@ export class TextfieldDemoComponent implements OnInit {
   comments = null;
   subject = null;
   message = null;
-  submitEventText = null;
-  inputHasFocus = false;
-  inputKeysPressed = 0;
-  inputCount = 0;
 
   ngOnInit() {
     let doc = <HTMLDivElement>document.body;
@@ -27,20 +23,4 @@ export class TextfieldDemoComponent implements OnInit {
     script.defer = true;
     doc.appendChild(script);
   }
-
-  handleFocus($event) {
-    this.inputHasFocus = true;
-  }
-  handleBlur($event) {
-    this.inputHasFocus = false;
-  }
-  handleInput($event) {
-    this.inputCount++;
-  }
-  handleKeyDown($event) {
-    this.inputKeysPressed++;
-  }
-  submit(message) {
-    // this.submitEventText = message;
-  }
 }
diff --git a/src/demo-app/app/components/toolbar-demo/toolbar-demo.component.html b/src/demo-app/app/components/toolbar-demo/toolbar-demo.component.html
@@ -12,6 +12,8 @@ <h1 mdc-typography-headline>Directives</h1>
     <pre class="prettyprint">mdc-toolbar-section</pre>
     <pre class="prettyprint">mdc-toolbar-title</pre>
     <pre class="prettyprint">mdc-toolbar-fixed-adjust</pre>
+    <pre class="prettyprint">mdc-toolbar-icon</pre>
+    <pre class="prettyprint">mdc-toolbar-icon-menu</pre>
   </div>
   <div fxLayout="column">
     <h1 mdc-typography-headline>API reference</h1>
@@ -66,41 +68,40 @@ <h1 mdc-typography-headline>Examples</h1>
       <mdc-toolbar [flexible]="false" [fixed]="false" [waterfall]="false" [fixedLastrow]="false" [flexibleTitle]="true">
         <mdc-toolbar-row>
           <mdc-toolbar-section [alignStart]="true">
-            <a href="#" class="material-icons mdc-toolbar__icon--menu" aria-label="menu">menu</a>
+            <a href="#/toolbar-demo" mdc-toolbar-icon-menu class="material-icons" aria-label="menu">menu</a>
             <span mdc-toolbar-title>Toolbar Title</span>
           </mdc-toolbar-section>
           <mdc-toolbar-section [alignEnd]="true">
-            <a href="#" class="material-icons mdc-toolbar__icon" aria-label="Download">file_download</a>
-            <a href="#" class="material-icons mdc-toolbar__icon" aria-label="Print this page">print</a>
-            <a href="#" class="material-icons mdc-toolbar__icon" aria-label="Bookmark this page">bookmark</a>
+            <a href="#/toolbar-demo" mdc-toolbar-icon class="material-icons" aria-label="Download">file_download</a>
+            <a href="#/toolbar-demo" mdc-toolbar-icon class="material-icons" aria-label="Print this page">print</a>
+            <a href="#/toolbar-demo" mdc-toolbar-icon class="material-icons" aria-label="Bookmark this page">bookmark</a>
           </mdc-toolbar-section>
         </mdc-toolbar-row>
       </mdc-toolbar>
       <pre class="prettyprint">
-&lt;mdc-toolbar 
+<![CDATA[
+<mdc-toolbar
   [flexible]="false"
   [fixed]="false"
   [waterfall]="false"
   [fixedLastrow]="false"
-  [flexibleTitle]="true"&gt;
-  &lt;mdc-toolbar-row&gt;
-    &lt;mdc-toolbar-section [alignStart]="true"&gt;
-      &lt;a href="#" class="material-icons mdc-toolbar__icon--menu"&gt;menu&lt;/a&gt;
-      &lt;mdc-toolbar-title&gt;Title&lt;/mdc-toolbar-title&gt;
-    &lt;/mdc-toolbar-section&gt;
-    &lt;mdc-toolbar-section [alignEnd]="true"&gt;
-      &lt;a href="#" class="material-icons mdc-toolbar__icon" alt="Download"&gt;file_download&lt;/a&gt;
-      &lt;a href="#" class="material-icons mdc-toolbar__icon" alt="Print page"&gt;print&lt;/a&gt;
-      &lt;a href="#" class="material-icons mdc-toolbar__icon" alt="Bookmark page"&gt;bookmark&lt;/a&gt;
-    &lt;/mdc-toolbar-section&gt;
-  &lt;/mdc-toolbar-row&gt;
-&lt;/mdc-toolbar&gt;
-&lt;main mdc-toolbar-fixed-adjust&gt;
-  &lt;p&gt;
-    All your page content here will have a default margin-top by using the mdc-toolbar-fixed-adjust directive.
-  &lt;/p&gt;
-&lt;/main&gt;
-        </pre>
+  [flexibleTitle]="true">
+  <mdc-toolbar-row>
+    <mdc-toolbar-section [alignStart]="true">
+      <a href="#/toolbar-demo" mdc-toolbar-icon-menu class="material-icons">menu</a>
+      <span mdc-toolbar-title>Toolbar Title</span>
+    </mdc-toolbar-section>
+    <mdc-toolbar-section [alignEnd]="true">
+      <a href="#/toolbar-demo" mdc-toolbar-icon class="material-icons">file_download</a>
+      <a href="#/toolbar-demo" mdc-toolbar-icon class="material-icons">print</a>
+      <a href="#/toolbar-demo" mdc-toolbar-icon class="material-icons">bookmark</a>
+    </mdc-toolbar-section>
+  </mdc-toolbar-row>
+</mdc-toolbar>
+<main mdc-toolbar-fixed-adjust>
+  Use mdc-toolbar-fixed-adjust directive to apply a default margin-top to page content.
+</main>
+]]></pre>
     </div>
   </div>
 </div>