Skip to content
This repository was archived by the owner on Oct 7, 2020. It is now read-only.

Commit 80a0f5c

Browse files
trimoxtrimox
committed
docs(demo-app): Updated with our new directives and more sample code. [ci skip]
1 parent 257cb04 commit 80a0f5c

File tree

10 files changed

+121
-109
lines changed

10 files changed

+121
-109
lines changed

‎src/demo-app/app/components/card-demo/card-demo.component.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -102,31 +102,23 @@ <h2 mdc-card-subtitle>Subtitle</h2>
102102
]]></pre>
103103
</div>
104104
<div fxLayout="column">
105-
<mdc-card class="demo-card">
105+
<mdc-card [darkTheme]="true" [ngClass]="{'mdc-theme--dark demo-card' : true}">
106106
<mdc-card-primary>
107-
<h1 mdc-card-title>Title</h1>
107+
<h1 mdc-card-title>Dark Theme</h1>
108108
<h2 mdc-card-subtitle>Subtitle</h2>
109109
</mdc-card-primary>
110-
<mdc-card-supporting-text>
111-
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.
112-
</mdc-card-supporting-text>
113110
<mdc-card-actions>
114111
<button mdc-button [cardAction]="true">Action 1</button>
115112
<button mdc-button [cardAction]="true">Action 2</button>
116113
</mdc-card-actions>
117114
</mdc-card>
118115
<pre class="prettyprint">
119116
<![CDATA[
120-
<mdc-card class="demo-card">
117+
<mdc-card [darkTheme]="true">
121118
<mdc-card-primary>
122119
<h1 mdc-card-title>Title</h1>
123120
<h2 mdc-card-subtitle>Subtitle</h2>
124121
</mdc-card-primary>
125-
<mdc-card-supporting-text>
126-
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
127-
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
128-
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
129-
</mdc-card-supporting-text>
130122
<mdc-card-actions>
131123
<button mdc-button [cardAction]="true">Action 1</button>
132124
<button mdc-button [cardAction]="true">Action 2</button>
@@ -135,23 +127,31 @@ <h2 mdc-card-subtitle>Subtitle</h2>
135127
]]></pre>
136128
</div>
137129
<div fxLayout="column">
138-
<mdc-card [darkTheme]="true" [ngClass]="{'mdc-theme--dark demo-card' : true}">
130+
<mdc-card class="demo-card">
139131
<mdc-card-primary>
140-
<h1 mdc-card-title>Dark Theme</h1>
132+
<h1 mdc-card-title>Title</h1>
141133
<h2 mdc-card-subtitle>Subtitle</h2>
142134
</mdc-card-primary>
135+
<mdc-card-supporting-text>
136+
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.
137+
</mdc-card-supporting-text>
143138
<mdc-card-actions>
144139
<button mdc-button [cardAction]="true">Action 1</button>
145140
<button mdc-button [cardAction]="true">Action 2</button>
146141
</mdc-card-actions>
147142
</mdc-card>
148143
<pre class="prettyprint">
149144
<![CDATA[
150-
<mdc-card [darkTheme]="true">
145+
<mdc-card class="demo-card">
151146
<mdc-card-primary>
152147
<h1 mdc-card-title>Title</h1>
153148
<h2 mdc-card-subtitle>Subtitle</h2>
154149
</mdc-card-primary>
150+
<mdc-card-supporting-text>
151+
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
152+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
153+
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
154+
</mdc-card-supporting-text>
155155
<mdc-card-actions>
156156
<button mdc-button [cardAction]="true">Action 1</button>
157157
<button mdc-button [cardAction]="true">Action 2</button>

‎src/demo-app/app/components/checkbox-demo/checkbox-demo.component.html‎

Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,14 @@ <h1 mdc-typography-headline>API reference</h1>
2121
<td><pre class="prettyprint">@Input() id: string</pre></td>
2222
<td>Unique Id of the checkbox (auto generated if not supplied).</td>
2323
</tr>
24+
<tr>
25+
<td><pre class="prettyprint">@Input() name: string</pre></td>
26+
<td>Name of the checkbox.</td>
27+
</tr>
28+
<tr>
29+
<td><pre class="prettyprint">@Input() value: any</pre></td>
30+
<td>Value of the checkbox.</td>
31+
</tr>
2432
<tr>
2533
<td><pre class="prettyprint">@Input() ariaLabel: string</pre></td>
2634
<td>Used to set the 'aria-label' attribute on the underlying input element.</td>
@@ -65,15 +73,16 @@ <h1 mdc-typography-headline>Events</h1>
6573
<h1 mdc-typography-headline>Examples</h1>
6674
<div fxLayout="column" class="mdc-padding">
6775
<mdc-form-field>
68-
<mdc-checkbox [(ngModel)]="isChecked" id="myCheckbox"></mdc-checkbox>
76+
<mdc-checkbox [(ngModel)]="isChecked" id="myCheckbox" name="myName"></mdc-checkbox>
6977
<label>Checkbox value is {{isChecked}}</label>
7078
</mdc-form-field>
7179
<pre class="prettyprint">
72-
&lt;mdc-form-field&gt;
73-
&lt;mdc-checkbox [(ngModel)]="isChecked" id="myCheckbox"&gt;&lt;/mdc-checkbox&gt;
74-
&lt;label&gt;Checkbox label&lt;/label&gt;
75-
&lt;/mdc-form-field&gt;
76-
</pre>
80+
<![CDATA[
81+
<mdc-form-field>
82+
<mdc-checkbox [(ngModel)]="isChecked" id="myCheckbox" name="myName"></mdc-checkbox>
83+
<label>My label</label>
84+
</mdc-form-field>
85+
]]></pre>
7786
</div>
7887
<div fxLayout="column" class="mdc-padding">
7988
<div fxFlexAlign="start">
@@ -84,11 +93,12 @@ <h1 mdc-typography-headline>Examples</h1>
8493
</div>
8594
<p>Indeterminate</p>
8695
<pre class="prettyprint">
87-
&lt;mdc-form-field&gt;
88-
&lt;mdc-checkbox [indeterminate]="true"&gt;&lt;/mdc-checkbox&gt;
89-
&lt;label&gt;Label&lt;/label&gt;
90-
&lt;/mdc-form-field&gt;
91-
</pre>
96+
<![CDATA[
97+
<mdc-form-field>
98+
<mdc-checkbox [indeterminate]="true"></mdc-checkbox>
99+
<label>Indeterminate Checkbox</label>
100+
</mdc-form-field>
101+
]]></pre>
92102
</div>
93103
<div fxLayout="column" class="mdc-padding">
94104
<div fxFlexAlign="start">
@@ -97,12 +107,12 @@ <h1 mdc-typography-headline>Examples</h1>
97107
<label>Checkbox is disabled</label>
98108
</mdc-form-field>
99109
</div>
100-
<p>Disabled</p>
101110
<pre class="prettyprint">
102-
&lt;mdc-form-field&gt;
103-
&lt;mdc-checkbox [disabled]="true"&gt;&lt;/mdc-checkbox&gt;
104-
&lt;label&gt;Label&lt;/label&gt;
105-
&lt;/mdc-form-field&gt;
106-
</pre>
111+
<![CDATA[
112+
<mdc-form-field>
113+
<mdc-checkbox [disabled]="true"></mdc-checkbox>
114+
<label>Checkbox is disabled</label>
115+
</mdc-form-field>
116+
]]></pre>
107117
</div>
108118
</div>

‎src/demo-app/app/components/elevation-demo/elevation-demo.component.html‎

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,16 @@ <h1 mdc-typography-display1>Elevation</h1>
55
<h1 mdc-typography-headline>Usage</h1>
66
<div>
77
<pre class="prettyprint"><![CDATA[import { ElevationModule } from '@angular-mdc/web';]]></pre>
8-
</div>
9-
<h1 mdc-typography-headline>Examples</h1>
10-
<p mdc-typography-subheading1>Usage: mdc-elevation-z0 -> mdc-elevation-z24</p>
11-
<div fxLayout="column" fxLayoutAlign="start" class="mdc-padding">
12-
<p mdc-elevation-z1>mdc-elevation-z1</p>
13-
<pre class="prettyprint">
14-
<![CDATA[
15-
<h4 mdc-elevation-z1>mdc-elevation-z1</h4>
16-
]]></pre>
17-
<p mdc-elevation-z2>mdc-elevation-z2</p>
188
<pre class="prettyprint">
199
<![CDATA[
20-
<h4 mdc-elevation-z2>mdc-elevation-z2</h4>
21-
]]></pre>
22-
<p mdc-elevation-z3>mdc-elevation-z3</p>
23-
<pre class="prettyprint">
24-
<![CDATA[
25-
<h4 mdc-elevation-z3>mdc-elevation-z3</h4>
10+
<div [mdc-elevation]="5"></div>
11+
12+
<h1 mdc-typography-body2 [mdc-elevation]="2">Sample text</h1>
2613
]]></pre>
2714
</div>
28-
</div>
15+
<h1 mdc-typography-headline>Examples</h1>
16+
<div fxLayout="row" fxLayoutWrap>
17+
<figure [mdc-elevation]="i" class="demo-surface" *ngFor="let i of items">
18+
<figcaption>mdc-elevation="{{i}}"</figcaption>
19+
</figure>
20+
</div>

‎src/demo-app/app/components/elevation-demo/elevation-demo.component.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import {
88
templateUrl: './elevation-demo.component.html'
99
})
1010
export class ElevationDemoComponent implements OnInit {
11+
items = Array.from(Array(25), (x, i) => i);
12+
1113
ngOnInit() {
1214
let doc = <HTMLDivElement>document.body;
1315
let script = document.createElement('script');

‎src/demo-app/app/components/menu-demo/menu-demo.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ <h1 mdc-typography-headline>API reference</h1>
7474
</div>
7575
<h1 mdc-typography-headline>Examples</h1>
7676
<div fxLayout="column" class="mdc-padding">
77-
<p>Change opening point of the menu</p>
77+
<p>Change opening point of menu (openFrom)</p>
7878
<div fxLayout="row">
7979
<mdc-form-field>
8080
<mdc-radio value="TOP_LEFT" (change)="handleChange();" name="radioGroup" [(ngModel)]="openingPoint"></mdc-radio>
@@ -93,7 +93,7 @@ <h1 mdc-typography-headline>Examples</h1>
9393
<label>Bottom Right</label>
9494
</mdc-form-field>
9595
</div>
96-
<div fxLayout="row" class="mdc-padding">
96+
<div fxLayout="column" class="mdc-padding">
9797
<div mdc-menu-anchor>
9898
<button mdc-fab (click)="showMenu();">
9999
<span mdc-fab-icon>person</span>

‎src/demo-app/app/components/navigation/navbar.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<mdc-toolbar [flexible]="false" [fixed]="true" [waterfall]="false" [fixedLastrow]="false" [flexibleTitle]="false">
22
<mdc-toolbar-row>
33
<mdc-toolbar-section [alignStart]="true">
4-
<a href="#" class="material-icons mdc-toolbar__icon--menu" alt="Home">{{router.url == '/' ? 'menu' : 'arrow_back'}}</a>
4+
<a href="#" class="material-icons" mdc-toolbar-icon-menu alt="Home">{{router.url == '/' ? 'menu' : 'arrow_back'}}</a>
55
<mdc-toolbar-title>Angular MDC</mdc-toolbar-title>
66
</mdc-toolbar-section>
77
<mdc-toolbar-section [alignEnd]="true">
8-
<a href="https://github.com/trimox/angular-mdc-web" alt="GitHub" class="material-icons mdc-toolbar__icon">
8+
<a href="https://github.com/trimox/angular-mdc-web" alt="GitHub" mdc-toolbar-icon class="material-icons">
99
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" style="padding-right: 10px;">
1010
<title>github-circle-white-transparent</title>
1111
<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" />

‎src/demo-app/app/components/textfield-demo/textfield-demo.component.html‎

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ <h1 mdc-typography-headline>API reference</h1>
2929
<td><pre class="prettyprint">@Input() type: string = 'text'</pre></td>
3030
<td>Input type of textfield (e.g. email, password, url).</td>
3131
</tr>
32+
<tr>
33+
<td><pre class="prettyprint">@Input() name: string</pre></td>
34+
<td>Name of the textfield.</td>
35+
</tr>
3236
<tr>
3337
<td><pre class="prettyprint">@Input() value: string</pre></td>
3438
<td>The input element's value.</td>
@@ -113,16 +117,17 @@ <h1 mdc-typography-headline>Events</h1>
113117
<h1 mdc-typography-headline>Examples</h1>
114118
<div fxLayout="column" class="mdc-padding">
115119
<div fxFlexAlign="start">
116-
<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);">
120+
<mdc-textfield [(ngModel)]="username" id="username" label="Username" required [disabled]="isDisabled" aria-controls="help-username-val">
117121
</mdc-textfield>
118122
<p mdc-textfield-helptext id="help-username-val" [validation]="true" [persistent]="false">Username is required</p>
119123
</div>
120-
<mdc-form-field>
121-
<mdc-checkbox [(ngModel)]="isDisabled"></mdc-checkbox>
122-
<label>Disable textfield</label>
123-
</mdc-form-field>
124+
<mdc-form-field>
125+
<mdc-checkbox [(ngModel)]="isDisabled"></mdc-checkbox>
126+
<label>Disable textfield</label>
127+
</mdc-form-field>
124128
<pre class="prettyprint">
125-
&lt;mdc-textfield [(ngModel)]="username"
129+
<![CDATA[
130+
<mdc-textfield [(ngModel)]="username"
126131
id="username"
127132
label="Username"
128133
required
@@ -131,13 +136,22 @@ <h1 mdc-typography-headline>Examples</h1>
131136
(focus)="handleFocus($event);"
132137
(blur)="handleBlur($event);"
133138
(input)="handleInput($event);"
134-
(keydown)="handleKeyDown($event);"&gt;
135-
&lt;/mdc-textfield&gt;
136-
&lt;p mdc-textfield-helptext
137-
id="help-username-val"
139+
(keydown)="handleKeyDown($event);"></mdc-textfield>
140+
<p mdc-textfield-helptext id="help-username-val"
138141
[validation]="true"
139-
[persistent]="false">Username is required&lt;/p&gt;
140-
</pre>
142+
[persistent]="false">Username is required</p>
143+
]]></pre>
144+
</div>
145+
<div fxLayout="column" class="mdc-padding">
146+
<div fxFlexAlign="start" class="mdc-padding" mdc-theme-dark>
147+
<mdc-textfield label="Dark theme"></mdc-textfield>
148+
</div>
149+
<pre class="prettyprint">
150+
<![CDATA[
151+
<div mdc-theme-dark>
152+
<mdc-textfield label="Dark theme"></mdc-textfield>
153+
</div>
154+
]]></pre>
141155
</div>
142156
<div fxLayout="column" class="mdc-padding">
143157
<div fxFlexAlign="start">

‎src/demo-app/app/components/textfield-demo/textfield-demo.component.ts‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,6 @@ export class TextfieldDemoComponent implements OnInit {
1313
comments = null;
1414
subject = null;
1515
message = null;
16-
submitEventText = null;
17-
inputHasFocus = false;
18-
inputKeysPressed = 0;
19-
inputCount = 0;
2016

2117
ngOnInit() {
2218
let doc = <HTMLDivElement>document.body;
@@ -27,20 +23,4 @@ export class TextfieldDemoComponent implements OnInit {
2723
script.defer = true;
2824
doc.appendChild(script);
2925
}
30-
31-
handleFocus($event) {
32-
this.inputHasFocus = true;
33-
}
34-
handleBlur($event) {
35-
this.inputHasFocus = false;
36-
}
37-
handleInput($event) {
38-
this.inputCount++;
39-
}
40-
handleKeyDown($event) {
41-
this.inputKeysPressed++;
42-
}
43-
submit(message) {
44-
// this.submitEventText = message;
45-
}
4626
}

‎src/demo-app/app/components/toolbar-demo/toolbar-demo.component.html‎

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ <h1 mdc-typography-headline>Directives</h1>
1212
<pre class="prettyprint">mdc-toolbar-section</pre>
1313
<pre class="prettyprint">mdc-toolbar-title</pre>
1414
<pre class="prettyprint">mdc-toolbar-fixed-adjust</pre>
15+
<pre class="prettyprint">mdc-toolbar-icon</pre>
16+
<pre class="prettyprint">mdc-toolbar-icon-menu</pre>
1517
</div>
1618
<div fxLayout="column">
1719
<h1 mdc-typography-headline>API reference</h1>
@@ -66,41 +68,40 @@ <h1 mdc-typography-headline>Examples</h1>
6668
<mdc-toolbar [flexible]="false" [fixed]="false" [waterfall]="false" [fixedLastrow]="false" [flexibleTitle]="true">
6769
<mdc-toolbar-row>
6870
<mdc-toolbar-section [alignStart]="true">
69-
<a href="#" class="material-icons mdc-toolbar__icon--menu" aria-label="menu">menu</a>
71+
<a href="#/toolbar-demo" mdc-toolbar-icon-menu class="material-icons" aria-label="menu">menu</a>
7072
<span mdc-toolbar-title>Toolbar Title</span>
7173
</mdc-toolbar-section>
7274
<mdc-toolbar-section [alignEnd]="true">
73-
<a href="#" class="material-icons mdc-toolbar__icon" aria-label="Download">file_download</a>
74-
<a href="#" class="material-icons mdc-toolbar__icon" aria-label="Print this page">print</a>
75-
<a href="#" class="material-icons mdc-toolbar__icon" aria-label="Bookmark this page">bookmark</a>
75+
<a href="#/toolbar-demo" mdc-toolbar-icon class="material-icons" aria-label="Download">file_download</a>
76+
<a href="#/toolbar-demo" mdc-toolbar-icon class="material-icons" aria-label="Print this page">print</a>
77+
<a href="#/toolbar-demo" mdc-toolbar-icon class="material-icons" aria-label="Bookmark this page">bookmark</a>
7678
</mdc-toolbar-section>
7779
</mdc-toolbar-row>
7880
</mdc-toolbar>
7981
<pre class="prettyprint">
80-
&lt;mdc-toolbar
82+
<![CDATA[
83+
<mdc-toolbar
8184
[flexible]="false"
8285
[fixed]="false"
8386
[waterfall]="false"
8487
[fixedLastrow]="false"
85-
[flexibleTitle]="true"&gt;
86-
&lt;mdc-toolbar-row&gt;
87-
&lt;mdc-toolbar-section [alignStart]="true"&gt;
88-
&lt;a href="#" class="material-icons mdc-toolbar__icon--menu"&gt;menu&lt;/a&gt;
89-
&lt;mdc-toolbar-title&gt;Title&lt;/mdc-toolbar-title&gt;
90-
&lt;/mdc-toolbar-section&gt;
91-
&lt;mdc-toolbar-section [alignEnd]="true"&gt;
92-
&lt;a href="#" class="material-icons mdc-toolbar__icon" alt="Download"&gt;file_download&lt;/a&gt;
93-
&lt;a href="#" class="material-icons mdc-toolbar__icon" alt="Print page"&gt;print&lt;/a&gt;
94-
&lt;a href="#" class="material-icons mdc-toolbar__icon" alt="Bookmark page"&gt;bookmark&lt;/a&gt;
95-
&lt;/mdc-toolbar-section&gt;
96-
&lt;/mdc-toolbar-row&gt;
97-
&lt;/mdc-toolbar&gt;
98-
&lt;main mdc-toolbar-fixed-adjust&gt;
99-
&lt;p&gt;
100-
All your page content here will have a default margin-top by using the mdc-toolbar-fixed-adjust directive.
101-
&lt;/p&gt;
102-
&lt;/main&gt;
103-
</pre>
88+
[flexibleTitle]="true">
89+
<mdc-toolbar-row>
90+
<mdc-toolbar-section [alignStart]="true">
91+
<a href="#/toolbar-demo" mdc-toolbar-icon-menu class="material-icons">menu</a>
92+
<span mdc-toolbar-title>Toolbar Title</span>
93+
</mdc-toolbar-section>
94+
<mdc-toolbar-section [alignEnd]="true">
95+
<a href="#/toolbar-demo" mdc-toolbar-icon class="material-icons">file_download</a>
96+
<a href="#/toolbar-demo" mdc-toolbar-icon class="material-icons">print</a>
97+
<a href="#/toolbar-demo" mdc-toolbar-icon class="material-icons">bookmark</a>
98+
</mdc-toolbar-section>
99+
</mdc-toolbar-row>
100+
</mdc-toolbar>
101+
<main mdc-toolbar-fixed-adjust>
102+
Use mdc-toolbar-fixed-adjust directive to apply a default margin-top to page content.
103+
</main>
104+
]]></pre>
104105
</div>
105106
</div>
106107
</div>

0 commit comments

Comments
 (0)