From 80a0f5c65fd2dfbd4c3d2246b66b363144e9459a Mon Sep 17 00:00:00 2001 From: Dominic Carretto Date: Sun, 2 Jul 2017 20:31:58 -0400 Subject: [PATCH] docs(demo-app): Updated with our new directives and more sample code. [ci skip] --- .../card-demo/card-demo.component.html | 28 +++++------ .../checkbox-demo.component.html | 44 ++++++++++------- .../elevation-demo.component.html | 26 ++++------ .../elevation-demo.component.ts | 2 + .../menu-demo/menu-demo.component.html | 4 +- .../navigation/navbar.component.html | 4 +- .../textfield-demo.component.html | 38 +++++++++----- .../textfield-demo.component.ts | 20 -------- .../toolbar-demo/toolbar-demo.component.html | 49 ++++++++++--------- src/demo-app/sass/main.scss | 15 +++++- 10 files changed, 121 insertions(+), 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 index f02def456..6b93c401a 100644 --- 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,14 +102,11 @@

Subtitle

]]>
- + -

Title

+

Dark Theme

Subtitle

 - - 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. - @@ -117,16 +114,11 @@

Subtitle

 
 
+
   
     
Title

     
Subtitle

   
-  
-    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.
-  
   
     
     
@@ -135,11 +127,14 @@ 
Subtitle

 ]]>
- + -

Dark Theme

+

Title

Subtitle

 + + 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. + @@ -147,11 +142,16 @@

Subtitle

 
 
+
   
     
Title

     
Subtitle

   
+  
+    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.
+  
   
     
     
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
index c85167a14..51d5315cc 100644
--- 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 @@ 
API reference

             
@Input() id: string

             Unique Id of the checkbox (auto generated if not supplied).
           
+          
+            
@Input() name: string

+            Name of the checkbox.
+          
+          
+            
@Input() value: any

+            Value of the checkbox.
+          
           
             
@Input() ariaLabel: string

             Used to set the 'aria-label' attribute on the underlying input element.
@@ -65,15 +73,16 @@ 
Events

   
Examples

   

     
-      
+      
       
     
     
-<mdc-form-field>
-  <mdc-checkbox [(ngModel)]="isChecked" id="myCheckbox"></mdc-checkbox>
-  <label>Checkbox label</label>
-</mdc-form-field>
-       

+
+  
+  
+
+]]>
@@ -84,11 +93,12 @@

Examples

Indeterminate

-<mdc-form-field>
-  <mdc-checkbox [indeterminate]="true"></mdc-checkbox>
-  <label>Label</label>
-</mdc-form-field>
-
+ + + + +]]>
@@ -97,12 +107,12 @@

Examples

-

Disabled

-<mdc-form-field>
-  <mdc-checkbox [disabled]="true"></mdc-checkbox>
-  <label>Label</label>
-</mdc-form-field>
-
+ + + + +]]>
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 index 356038dd2..a20fdf991 100644 --- 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 @@

Elevation

Usage

-
-

Examples

-

Usage: mdc-elevation-z0 -> mdc-elevation-z24

-
-

mdc-elevation-z1

- 
-mdc-elevation-z1
-]]>
-

mdc-elevation-z2

 mdc-elevation-z2
-]]>
-

mdc-elevation-z3

- 
-mdc-elevation-z3
+

+
+
Sample text

 ]]>
- +

Examples

+
+
+
mdc-elevation="{{i}}"
+
+
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 index f18eb861b..d7f4c7d62 100644 --- 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 = 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 index 2286ce726..ce3576f78 100644 --- 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 @@

API reference

Examples

-

Change opening point of the menu

+

Change opening point of menu (openFrom)

@@ -93,7 +93,7 @@

Examples
-
+
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 index 55eddfc2c..3a9b07259 100644 --- 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 = 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 index d7167a55b..440de0ad5 100644 --- 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 @@

Directives

mdc-toolbar-section
mdc-toolbar-title
mdc-toolbar-fixed-adjust
+ 
mdc-toolbar-icon
+ 
mdc-toolbar-icon-menu

API reference

@@ -66,41 +68,40 @@

Examples

- menu + menu Toolbar Title - file_download - print - bookmark + file_download + print + bookmark 
-<mdc-toolbar 
+
+  [flexibleTitle]="true">
+  
+    
+      menu
+      Toolbar Title
+    
+    
+      file_download
+      print
+      bookmark
+    
+  
+
+

+  Use mdc-toolbar-fixed-adjust directive to apply a default margin-top to page content.
+

+]]>
diff --git a/src/demo-app/sass/main.scss b/src/demo-app/sass/main.scss index 7f0ed679f..1eb3960e3 100644 --- a/src/demo-app/sass/main.scss +++ b/src/demo-app/sass/main.scss @@ -33,6 +33,19 @@ td { } .demo-card { - width: 21.875rem; + width: 22.875rem; margin-bottom: 20px; } + +.demo-surface { + display: flex; + align-items: center; + justify-content: center; + width: 200px; + height: 100px; + margin: 0 60px 80px; + border-radius: 3px; + background: white; + color: #9e9e9e; + font-size: .8rem; +}