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

Commit e700e0b

Browse files
trimoxtrimox
committed
feat(demo-app): Completely rewritten demo-app.
1 parent 810ef9f commit e700e0b

22 files changed

+1264
-169
lines changed

‎src/demo-app/app/app-routing.module.ts‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,34 @@
22
import { RouterModule, Routes } from '@angular/router';
33

44
import { HomeComponent } from './components/home/home.component';
5+
import { ButtonDemoComponent } from './components/button-demo/button-demo.component';
6+
import { CheckboxDemoComponent } from './components/checkbox-demo/checkbox-demo.component';
7+
import { FabDemoComponent } from './components/fab-demo/fab-demo.component';
8+
import { SwitchDemoComponent } from './components/switch-demo/switch-demo.component';
9+
import { SnackbarDemoComponent } from './components/snackbar-demo/snackbar-demo.component';
10+
import { MenuDemoComponent } from './components/menu-demo/menu-demo.component';
11+
import { TextfieldDemoComponent } from './components/textfield-demo/textfield-demo.component';
12+
import { ToolbarDemoComponent } from './components/toolbar-demo/toolbar-demo.component';
513

614
export const appRoutes: Routes = [
7-
{ path: '', component: HomeComponent, pathMatch: 'full' },
8-
{ path: '**', redirectTo: '' }
15+
{ path: 'button-demo', component: ButtonDemoComponent },
16+
{ path: 'checkbox-demo', component: CheckboxDemoComponent },
17+
{ path: 'fab-demo', component: FabDemoComponent },
18+
{ path: 'switch-demo', component: SwitchDemoComponent },
19+
{ path: 'snackbar-demo', component: SnackbarDemoComponent },
20+
{ path: 'menu-demo', component: MenuDemoComponent },
21+
{ path: 'textfield-demo', component: TextfieldDemoComponent },
22+
{ path: 'toolbar-demo', component: ToolbarDemoComponent },
23+
{ path: '', component: HomeComponent, pathMatch: 'full' },
24+
{ path: '**', redirectTo: '' }
925
];
1026

1127
@NgModule({
12-
imports: [
13-
RouterModule.forRoot(appRoutes)
14-
],
15-
exports: [
16-
RouterModule
17-
]
28+
imports: [
29+
RouterModule.forRoot(appRoutes, { useHash: true })
30+
],
31+
exports: [
32+
RouterModule
33+
]
1834
})
1935
export class AppRoutingModule { }

‎src/demo-app/app/app.module.ts‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,45 @@ import { RouterModule } from '@angular/router';
66

77
import { AppComponent } from './app.component';
88
import { NavbarComponent } from './components/navigation/navbar.component';
9+
import { ButtonDemoComponent } from './components/button-demo/button-demo.component';
10+
import { CheckboxDemoComponent } from './components/checkbox-demo/checkbox-demo.component';
11+
import { FabDemoComponent } from './components/fab-demo/fab-demo.component';
12+
import { SwitchDemoComponent } from './components/switch-demo/switch-demo.component';
13+
import { SnackbarDemoComponent } from './components/snackbar-demo/snackbar-demo.component';
14+
import { MenuDemoComponent } from './components/menu-demo/menu-demo.component';
15+
import { TextfieldDemoComponent } from './components/textfield-demo/textfield-demo.component';
16+
import { ToolbarDemoComponent } from './components/toolbar-demo/toolbar-demo.component';
917

1018
import { MaterialModule } from './../../lib';
1119
import { HomeComponent } from './components/home/home.component';
12-
//import { FlexLayoutModule } from '@angular/flex-layout';
20+
import { FlexLayoutModule } from '@angular/flex-layout';
1321

1422
import { AppRoutingModule } from './app-routing.module';
1523

24+
require('@material/typography/mdc-typography.scss');
25+
require('@material/card/mdc-card.scss');
26+
1627
@NgModule({
1728
imports: [
1829
BrowserModule,
1930
FormsModule,
2031
HttpModule,
21-
// FlexLayoutModule,
32+
FlexLayoutModule,
2233
MaterialModule,
2334
AppRoutingModule
2435
],
2536
declarations: [
2637
AppComponent,
2738
NavbarComponent,
28-
HomeComponent
39+
HomeComponent,
40+
ButtonDemoComponent,
41+
CheckboxDemoComponent,
42+
FabDemoComponent,
43+
SwitchDemoComponent,
44+
SnackbarDemoComponent,
45+
MenuDemoComponent,
46+
TextfieldDemoComponent,
47+
ToolbarDemoComponent
2948
],
3049
bootstrap: [AppComponent]
3150
})

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

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<div fxLayout="column" class="mdc-padding">
2+
<h1 class="mdc-typography--display1">Buttons</h1>
3+
<p class="mdc-typography--body1">The MDC Button component is a spec-aligned button component adhering to the Material Design button requirements.</p>
4+
<a href="https://github.com/material-components/material-components-web/tree/master/packages/mdc-button">Google's Material Components for the web documentation</a>
5+
<h1 class="mdc-typography--headline">Usage</h1>
6+
<div style="width: 400px;">
7+
<pre class="prettyprint"><![CDATA[import { ButtonModule } from '@angular-mdc/web';]]></pre>
8+
</div>
9+
<div fxLayout="row">
10+
<div fxLayout="column">
11+
<h1 class="mdc-typography--headline">API reference</h1>
12+
<table>
13+
<thead>
14+
<tr>
15+
<th>Attribute</th>
16+
<th>Description</th>
17+
</tr>
18+
</thead>
19+
<tbody>
20+
<tr>
21+
<td><pre class="prettyprint">@Input() type: string</pre></td>
22+
<td>Input type of button (e.g. email, password, url).</td>
23+
</tr>
24+
<tr>
25+
<td><pre class="prettyprint">@Input() dense: boolean</pre></td>
26+
<td>Compresses the button text to make it slightly smaller.</td>
27+
</tr>
28+
<tr>
29+
<td><pre class="prettyprint">@Input() raised: boolean</pre></td>
30+
<td>Elevates the button and creates a colored background.</td>
31+
</tr>
32+
<tr>
33+
<td><pre class="prettyprint">@Input() compact: boolean</pre></td>
34+
<td>Reduces the amount of horizontal padding in the button.</td>
35+
</tr>
36+
<tr>
37+
<td><pre class="prettyprint">@Input() primary: boolean</pre></td>
38+
<td>Colors the button with the primary color.</td>
39+
</tr>
40+
<tr>
41+
<td><pre class="prettyprint">@Input() accent: boolean</pre></td>
42+
<td>Colors the button with the accent color.</td>
43+
</tr>
44+
<tr>
45+
<td><pre class="prettyprint">@Input() disabled: string</pre></td>
46+
<td>Disables the component.</td>
47+
</tr>
48+
</tbody>
49+
</table>
50+
</div>
51+
52+
<div fxLayout="column" fxFlexOffset="5">
53+
<h1 class="mdc-typography--headline">Events</h1>
54+
<table>
55+
<thead>
56+
<tr>
57+
<th>Event</th>
58+
<th>Description</th>
59+
</tr>
60+
</thead>
61+
<tbody>
62+
<tr>
63+
<td><pre class="prettyprint">@HostListener() keydown</pre></td>
64+
<td>Show ripple on keyboard down event.</td>
65+
</tr>
66+
<tr>
67+
<td><pre class="prettyprint">@HostListener() keyup</pre></td>
68+
<td>Show ripple on keyboard up event.</td>
69+
</tr>
70+
</tbody>
71+
</table>
72+
</div>
73+
</div>
74+
75+
<h1 class="mdc-typography--headline">Examples</h1>
76+
<div fxLayout="column" fxLayoutAlign="start start">
77+
<div fxLayout="column" class="mdc-padding">
78+
<div fxFlexAlign="start">
79+
<button mdc-button [accent]="true">Button</button>
80+
</div>
81+
<p>Accent</p>
82+
<pre class="prettyprint">&lt;button mdc-button [accent]="true"&gt;Accent&lt;/button&gt;</pre>
83+
</div>
84+
<div fxLayout="column" class="mdc-padding">
85+
<div fxFlexAlign="start">
86+
<button mdc-button [raised]="true">Button</button>
87+
</div>
88+
<p>Raised</p>
89+
<pre class="prettyprint">&lt;button mdc-button [raised]="true"&gt;Raised&lt;/button&gt;</pre>
90+
</div>
91+
<div fxLayout="column" class="mdc-padding">
92+
<div fxFlexAlign="start">
93+
<button mdc-button [dense]="true" [raised]="true">Button</button>
94+
</div>
95+
<p>Dense and Raised</p>
96+
<pre class="prettyprint">&lt;button mdc-button [dense]="true" [raised]="true"&gt;Dense and Raised&lt;/button&gt;</pre>
97+
</div>
98+
<div fxLayout="column" class="mdc-padding">
99+
<div fxFlexAlign="start">
100+
<button mdc-button [compact]="true" [raised]="true">Button</button>
101+
</div>
102+
<p>Compact and Raised</p>
103+
<pre class="prettyprint">&lt;button mdc-button [compact]="true" [raised]="true"&gt;Compact and Raised&lt;/button&gt;</pre>
104+
</div>
105+
<div fxLayout="column" class="mdc-padding">
106+
<div fxFlexAlign="start">
107+
<button mdc-button [accent]="true" [raised]="true">Button</button>
108+
</div>
109+
<p>Accent and Raised</p>
110+
<pre class="prettyprint">&lt;button mdc-button [accent]="true" [raised]="true"&gt;Accent and Raised&lt;/button&gt;</pre>
111+
</div>
112+
<div fxLayout="column" class="mdc-padding">
113+
<div fxFlexAlign="start">
114+
<button mdc-button [primary]="true" [raised]="true">Button</button>
115+
</div>
116+
<p>Primary and Raised</p>
117+
<pre class="prettyprint">&lt;button mdc-button [primary]="true" [raised]="true"&gt;Primary and Raised&lt;/button&gt;</pre>
118+
</div>
119+
<div fxLayout="column" class="mdc-padding">
120+
<div fxFlexAlign="start">
121+
<button mdc-button [primary]="true" [raised]="true" disabled>Button</button>
122+
</div>
123+
<p>Disabled</p>
124+
<pre class="prettyprint">&lt;button mdc-button [primary]="true" [raised]="true" disabled&gt;Disabled&lt;/button&gt;</pre>
125+
</div>
126+
</div>
127+
</div>

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import {
2+
Component,
3+
OnInit,
4+
ViewChild
5+
} from '@angular/core';
6+
7+
@Component({
8+
selector: 'button-demo',
9+
templateUrl: './button-demo.component.html'
10+
})
11+
export class ButtonDemoComponent implements OnInit {
12+
13+
ngOnInit() {
14+
let doc = <HTMLDivElement>document.body;
15+
let script = document.createElement('script');
16+
script.innerHTML = '';
17+
script.src = 'https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst';
18+
script.async = true;
19+
script.defer = true;
20+
doc.appendChild(script);
21+
}
22+
}

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<div fxLayout="column" class="mdc-padding">
2+
<h1 class="mdc-typography--display1">Checkbox</h1>
3+
<p class="mdc-typography--body1">The MDC Checkbox component is a spec-aligned checkbox component adhering to the Material Design checkbox requirements.</p>
4+
<a href="https://github.com/material-components/material-components-web/tree/master/packages/mdc-checkbox">Google's Material Components for the web documentation</a>
5+
<h1 class="mdc-typography--headline">Usage</h1>
6+
<div style="width: 400px;">
7+
<pre class="prettyprint"><![CDATA[import { CheckboxModule } from '@angular-mdc/web';]]></pre>
8+
</div>
9+
<h1 class="mdc-typography--headline">Directives</h1>
10+
<div style="width: 400px;">
11+
<pre class="prettyprint"><![CDATA[@Directive({selector: '[mdc-checkbox-label]'})]]></pre>
12+
</div>
13+
<div fxLayout="row">
14+
<div fxLayout="column">
15+
<h1 class="mdc-typography--headline">API reference</h1>
16+
<table>
17+
<thead>
18+
<tr>
19+
<th>Attribute</th>
20+
<th>Description</th>
21+
</tr>
22+
</thead>
23+
<tbody>
24+
<tr>
25+
<td><pre class="prettyprint">@Input() checked: boolean</pre></td>
26+
<td>Boolean for verifying the checked value.</td>
27+
</tr>
28+
<tr>
29+
<td><pre class="prettyprint">@Input() indeterminate: boolean</pre></td>
30+
<td>To represent a checkbox with three states (e.g. a nested list of checkable items).</td>
31+
</tr>
32+
<tr>
33+
<td><pre class="prettyprint">@Input() labelId: string</pre></td>
34+
<td></td>
35+
</tr>
36+
<tr>
37+
<td><pre class="prettyprint">@Input() disabled: string</pre></td>
38+
<td>Disables the component.</td>
39+
</tr>
40+
</tbody>
41+
</table>
42+
</div>
43+
44+
<div fxLayout="column" fxFlexOffset="5">
45+
<h1 class="mdc-typography--headline">Events</h1>
46+
<table>
47+
<thead>
48+
<tr>
49+
<th>Event</th>
50+
<th>Description</th>
51+
</tr>
52+
</thead>
53+
<tbody>
54+
<tr>
55+
<td><pre class="prettyprint">@Output() change</pre></td>
56+
<td>Event dispatched on value change.</td>
57+
</tr>
58+
</tbody>
59+
</table>
60+
</div>
61+
</div>
62+
63+
<h1 class="mdc-typography--headline">Examples</h1>
64+
<div fxLayout="column" fxLayoutAlign="start start">
65+
<div fxLayout="column" class="mdc-padding">
66+
<div fxFlexAlign="start">
67+
<mdc-form-field>
68+
<mdc-checkbox [(ngModel)]="isChecked"></mdc-checkbox>
69+
<label mdc-checkbox-label [id]="labelId">The checkbox is {{isChecked}}</label>
70+
</mdc-form-field>
71+
</div>
72+
<pre class="prettyprint">
73+
&lt;mdc-form-field&gt;
74+
&lt;mdc-checkbox [(ngModel)]="isChecked"&gt;&lt;/mdc-checkbox&gt;
75+
&lt;label mdc-checkbox-label [id]="labelId"&gt;Label text&lt;/label&gt;
76+
&lt;/mdc-form-field&gt;
77+
</pre>
78+
</div>
79+
</div>
80+
</div>

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import {
2+
Component,
3+
OnInit,
4+
ViewChild
5+
} from '@angular/core';
6+
7+
@Component({
8+
selector: 'checkbox-demo',
9+
templateUrl: './checkbox-demo.component.html'
10+
})
11+
export class CheckboxDemoComponent implements OnInit {
12+
isChecked = false;
13+
14+
ngOnInit() {
15+
let doc = <HTMLDivElement>document.body;
16+
let script = document.createElement('script');
17+
script.innerHTML = '';
18+
script.src = 'https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst';
19+
script.async = true;
20+
script.defer = true;
21+
doc.appendChild(script);
22+
}
23+
}

0 commit comments

Comments
 (0)