docs(demo): Add MDC List documentation/examples

trimox · Jul 17, 2017 · ddd1b81 · ddd1b81
1 parent adfffa2
commit ddd1b81
Show file tree

Hide file tree

Showing 25 changed files with 983 additions and 511 deletions.
diff --git a/src/demo-app/app.component.ts b/src/demo-app/app.component.ts
@@ -6,7 +6,7 @@ import { Router, NavigationEnd } from '@angular/router';
   template:
   `
   <navbar></navbar>
-  <div mdc-typography>
+  <div>
     <router-outlet></router-outlet>
   </div>  
   `
@@ -15,8 +15,10 @@ export class AppComponent implements OnInit {
   constructor(private _router: Router) { }
   ngOnInit() {
     this._router.events.subscribe(event => {
-      if (event instanceof NavigationEnd) {
-        window.scrollTo(0, 0);
+      if (this._router.url !== '/') {
+        if (event instanceof NavigationEnd) {
+          window.scrollTo(0, 0);
+        }
       }
     });
   }

diff --git a/src/demo-app/app.module.ts b/src/demo-app/app.module.ts
@@ -11,8 +11,8 @@ import { CheckboxDemoComponent } from './components/checkbox-demo/checkbox-demo.
 import { FabDemoComponent } from './components/fab-demo/fab-demo.component';
 import { ElevationDemoComponent } from './components/elevation-demo/elevation-demo.component';
 import { LinearProgressDemoComponent } from './components/linear-progress-demo/linear-progress-demo.component';
+import { ListDemoComponent } from './components/list-demo/list-demo.component';
 import { MenuDemoComponent } from './components/menu-demo/menu-demo.component';
-import { NavbarComponent } from './components/navigation/navbar.component';
 import { RadioDemoComponent } from './components/radio-demo/radio-demo.component';
 import { SnackbarDemoComponent } from './components/snackbar-demo/snackbar-demo.component';
 import { SwitchDemoComponent } from './components/switch-demo/switch-demo.component';
@@ -23,6 +23,7 @@ import { TypographyDemoComponent } from './components/typography-demo/typography
 import { MaterialModule } from '@angular-mdc/web';
 
 import { HomeComponent } from './components/home/home.component';
+import { NavbarComponent } from './components/navigation/navbar.component';
 import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { demoAppRoutes } from './routes';
@@ -45,6 +46,7 @@ import { demoAppRoutes } from './routes';
     FabDemoComponent,
     HomeComponent,
     LinearProgressDemoComponent,
+    ListDemoComponent,
     MenuDemoComponent,
     NavbarComponent,
     RadioDemoComponent,

diff --git a/src/demo-app/components/button-demo/button-demo.component.html b/src/demo-app/components/button-demo/button-demo.component.html
@@ -19,8 +19,6 @@ <h1 mdc-typography-display1>Buttons</h1>
           <td>a[mdc-button]</td>
         </tr>
       </tbody>
-    </table>
-    <table>
       <thead>
         <tr>
           <th>Properties</th>
@@ -57,20 +55,44 @@ <h1 mdc-typography-display1>Buttons</h1>
           <td>Correctly sets position of card action buttons. (Sets compact to true automatically)</td>
         </tr>
         <tr>
-          <td>@Input() disabled: string</td>
-          <td>Disables the component.</td>
+          <td>@Input() disabled: boolean</td>
+          <td>Disables the button.</td>
+        </tr>
+        <tr>
+          <td>@Input() disableRipple: boolean</td>
+          <td>
+<pre><code><![CDATA[Disable the ink ripple.
+Example: disableRipple="true" or disableRipple]]></code></pre></td>
         </tr>
       </tbody>
     </table>
   </div>
+  <button mdc-button [primary]="true" [raised]="true" (click)="handleClick();">Click event</button>
+<pre style="background:#000;color:#f8f8f8"><span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span>
+ [<span style="color:#e0c589">primary</span>]=<span style="color:#65b042">"true"</span>
+ [<span style="color:#e0c589">raised</span>]=<span style="color:#65b042">"true"</span>
+ (<span style="color:#e0c589">click</span>)=<span style="color:#65b042">"handleClick();"</span>></span>Click event<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
+</pre>
+  <button mdc-button [primary]="true" [raised]="true" mdc-theme-dark="true">Dark theme</button>
+<pre style="background:#000;color:#f8f8f8"><span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span>
+ [<span style="color:#e0c589">primary</span>]=<span style="color:#65b042">"true"</span>
+ [<span style="color:#e0c589">raised</span>]=<span style="color:#65b042">"true"</span>
+ <span style="color:#e0c589">mdc-theme-dark</span>=<span style="color:#65b042">"true"</span>></span>Dark theme<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
+</pre>
+  <button mdc-button [primary]="true" [raised]="true" [disableRipple]="true">Ink ripple - Disabled</button>
+<pre style="background:#000;color:#f8f8f8"><span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span>
+  [<span style="color:#e0c589">primary</span>]=<span style="color:#65b042">"true"</span>
+  [<span style="color:#e0c589">raised</span>]=<span style="color:#65b042">"true"</span>
+  [<span style="color:#e0c589">disableRipple</span>]=<span style="color:#65b042">"true"</span>></span>Ink ripple - Disabled<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
+</pre>
   <button mdc-button [accent]="true">Accent</button>
   <pre style="background:#000;color:#f8f8f8"><span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span> [<span style="color:#e0c589">accent</span>]=<span style="color:#65b042">"true"</span>></span>Accent<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
 </pre>
-  <a mdc-button [primary]="true" [raised]="true" href="/#/button-demo">Href Usage</a>
+  <a mdc-button [primary]="true" [raised]="true" href="#/button-demo">Href link</a>
 <pre style="background:#000;color:#f8f8f8"><span style="color:#e0c589">&lt;<span style="color:#e0c589">a</span> <span style="color:#e0c589">mdc-button</span>
  [<span style="color:#e0c589">primary</span>]=<span style="color:#65b042">"true"</span>
  [<span style="color:#e0c589">raised</span>]=<span style="color:#65b042">"true"</span>
- <span style="color:#e0c589">href</span>=<span style="color:#65b042">"/#/button-demo"</span>></span>Primary and Raised<span style="color:#e0c589">&lt;/<span style="color:#e0c589">a</span>></span>
+ <span style="color:#e0c589">href</span>=<span style="color:#65b042">"/#/button-demo"</span>></span>Href link<span style="color:#e0c589">&lt;/<span style="color:#e0c589">a</span>></span>
 </pre>
   <button mdc-button [raised]="true">Raised</button>
   <pre style="background:#000;color:#f8f8f8"><span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span> [<span style="color:#e0c589">raised</span>]=<span style="color:#65b042">"true"</span>></span>Raised<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
@@ -100,3 +122,4 @@ <h1 mdc-typography-display1>Buttons</h1>
  [<span style="color:#e0c589">primary</span>]=<span style="color:#65b042">"true"</span>
  [<span style="color:#e0c589">disabled</span>]=<span style="color:#65b042">"true"</span>></span>Disabled<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
 </pre> </div>
+<mdc-snackbar #snack></mdc-snackbar>
diff --git a/src/demo-app/components/button-demo/button-demo.component.ts b/src/demo-app/components/button-demo/button-demo.component.ts
@@ -1,9 +1,23 @@
 import {
-  Component,
+	Component,
+	ViewChild
 } from '@angular/core';
 
+import { SnackbarMessage, SnackbarComponent } from '@angular-mdc/web';
+
 @Component({
-  selector: 'button-demo',
-  templateUrl: './button-demo.component.html'
+	selector: 'button-demo',
+	templateUrl: './button-demo.component.html'
 })
-export class ButtonDemoComponent { }
+export class ButtonDemoComponent {
+	message: SnackbarMessage;
+	@ViewChild('snack') snack: SnackbarComponent;
+
+	handleClick() {
+		this.message = {
+			message: 'Sample text',
+			actionText: 'Ok',
+		};
+		this.snack.show(this.message);
+	}
+}
diff --git a/src/demo-app/components/card-demo/card-demo.component.html b/src/demo-app/components/card-demo/card-demo.component.html
@@ -9,26 +9,30 @@ <h1 mdc-typography-display1>Cards</h1>
       <thead>
         <tr>
           <th>Component</th>
-          <th>Description</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td>mdc-card</td>
         </tr>
       </tbody>
-      <tfoot>
+      <thead>
+        <tr>
+          <th>Properties</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
         <tr>
           <td>@Input() darkTheme: boolean</td>
           <td>Apply dark theme directly to the card.</td>
         </tr>
-      </tfoot>
+      </tbody>
     </table>
     <table>
       <thead>
         <tr>
-          <th>Directives</th>
-          <th>Description</th>
+          <th>Directive</th>
         </tr>
       </thead>
       <tbody>
@@ -58,7 +62,6 @@ <h1 mdc-typography-display1>Cards</h1>
       <thead>
         <tr>
           <th>Directive</th>
-          <th>Description</th>
         </tr>
       </thead>
       <tbody>
@@ -67,18 +70,23 @@ <h1 mdc-typography-display1>Cards</h1>
           <td>A title block.</td>
         </tr>
       </tbody>
-      <tfoot>
+      <thead>
+        <tr>
+          <th>Properties</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
         <tr>
           <td>@Input() large: boolean</td>
           <td>An option to make the title text larger. (default is true)</td>
         </tr>
-      </tfoot>
+      </tbody>
     </table>
     <table>
       <thead>
         <tr>
           <th>Directive</th>
-          <th>Description</th>
         </tr>
       </thead>
       <tbody>
@@ -87,18 +95,23 @@ <h1 mdc-typography-display1>Cards</h1>
           <td>Area used for showing different actions the user can take.</td>
         </tr>
       </tbody>
-      <tfoot>
+      <thead>
+        <tr>
+          <th>Properties</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
         <tr>
           <td>@Input() vertical: boolean</td>
           <td>Option to lay actions out vertically instead of horizontally.</td>
         </tr>
-      </tfoot>
+      </tbody>
     </table>
     <table>
       <thead>
         <tr>
           <th>Directive</th>
-          <th>Description</th>
         </tr>
       </thead>
       <tbody>
@@ -107,12 +120,18 @@ <h1 mdc-typography-display1>Cards</h1>
           <td>Media items are designed to be used in horizontal blocks, taking up a fixed height, rather than stretching to the width of the card.</td>
         </tr>
       </tbody>
-      <tfoot>
+      <thead>
+        <tr>
+          <th>Properties</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
         <tr>
           <td>@Input() size: number</td>
           <td>Some predefined media item sizes. Valid values are [1, 1.5, 2, and 3]</td>
         </tr>
-      </tfoot>
+      </tbody>
     </table>
   </div>
   <div fxLayout="column" fxLayoutGap="40px" fxLayoutAlign="start start">
@@ -206,8 +225,9 @@ <h2 mdc-card-subtitle>Subtitle</h2>
   <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-card-primary</span>></span>
   <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-card-supporting-text</span>></span>
     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.
+    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.
   <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-card-supporting-text</span>></span>
   <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-card-actions</span>></span>
     <span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span> [<span style="color:#e0c589">cardAction</span>]=<span style="color:#65b042">"true"</span>></span>Action 1<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
@@ -328,7 +348,6 @@ <h2 mdc-card-subtitle>Subtitle</h2>
     <span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span> [<span style="color:#e0c589">cardAction</span>]=<span style="color:#65b042">"true"</span>></span>Action 2<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
   <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-card-actions</span>></span>
 <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-card</span>></span>
-
 </pre>
     </div>
   </div>

diff --git a/src/demo-app/components/checkbox-demo/checkbox-demo.component.html b/src/demo-app/components/checkbox-demo/checkbox-demo.component.html
@@ -16,8 +16,6 @@ <h1 mdc-typography-display1>Checkbox</h1>
           <td>mdc-checkbox</td>
         </tr>
       </tbody>
-    </table>
-    <table>
       <thead>
         <tr>
           <th>Properties</th>
@@ -57,9 +55,13 @@ <h1 mdc-typography-display1>Checkbox</h1>
           <td>@Input() disabled: boolean</td>
           <td>Disables the component.</td>
         </tr>
+        <tr>
+          <td>@Input() disableRipple: boolean</td>
+          <td>
+<pre><code><![CDATA[Disable the ink ripple.
+Example: disableRipple="true" or disableRipple]]></code></pre></td>
+        </tr>
       </tbody>
-    </table>
-    <table>
       <thead>
         <tr>
           <th>Events</th>
@@ -102,5 +104,13 @@ <h1 mdc-typography-display1>Checkbox</h1>
   <span style="color:#e0c589">&lt;<span style="color:#e0c589">label</span>></span>Checkbox is disabled<span style="color:#e0c589">&lt;/<span style="color:#e0c589">label</span>></span>
 <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-form-field</span>></span>
 </pre>
-  </div>
+    <mdc-form-field>
+      <mdc-checkbox disableRipple></mdc-checkbox>
+      <label>Ripple disabled</label>
+    </mdc-form-field>
+<pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span>-form-field></span>
+  <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span>-checkbox disableRipple></span><span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span>-checkbox></span>
+  <span style="color:#89bdff">&lt;<span style="color:#89bdff">label</span>></span>Ripple disabled<span style="color:#89bdff">&lt;/<span style="color:#89bdff">label</span>></span>
+<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span>-form-field></span>
+</pre>  </div>
 </div>
diff --git a/src/demo-app/components/elevation-demo/elevation-demo.component.html b/src/demo-app/components/elevation-demo/elevation-demo.component.html
@@ -15,7 +15,7 @@ <h1 mdc-typography-display1>Elevation</h1>
       <tbody>
         <tr>
           <td>mdc-elevation="#"</td>
-          <td>The elevation values are mapped out in a "z-space" and range from 0 to 24.</td>
+          <td>Elevation values are mapped out in a "z-space" and range from 0 to 24.</td>
         </tr>
       </tbody>
     </table>

diff --git a/src/demo-app/components/fab-demo/fab-demo.component.html b/src/demo-app/components/fab-demo/fab-demo.component.html
@@ -19,8 +19,6 @@ <h1 mdc-typography-display1>Floating Action Buttons</h1>
           <td>a[mdc-fab]</td>
         </tr>
       </tbody>
-    </table>
-    <table>
       <thead>
         <tr>
           <th>Properties</th>
@@ -37,8 +35,27 @@ <h1 mdc-typography-display1>Floating Action Buttons</h1>
           <td>Makes the FAB have a white background.</td>
         </tr>
         <tr>
-          <td>@Input() disabled: string</td>
-          <td>Disables the component.</td>
+          <td>@Input() disabled: boolean</td>
+          <td>Disables the button.</td>
+        </tr>
+        <tr>
+          <td>@Input() disableRipple: boolean</td>
+          <td>
+<pre><code><![CDATA[Disable the ink ripple.
+Example: disableRipple="true" or disableRipple]]></code></pre></td>
+        </tr>
+      </tbody>
+    </table>
+    <table>
+      <thead>
+        <tr>
+          <th>Directive</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>mdc-fab-icon</td>
+          <td>Use with an icon or svg to place an image in the center of the button.</td>
         </tr>
       </tbody>
     </table>