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

Commit f6bbf50

Browse files
trimoxtrimox
authored
docs(demos): Update demos (#1526)
1 parent 590b5fa commit f6bbf50

19 files changed

+172
-167
lines changed

‎demos/app-layout.html‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<mdc-top-app-bar class="demo-top-app-bar" #topAppBar fixed [fixedAdjustElement]="mainContent">
1+
<mdc-top-app-bar class="demo-top-app-bar" #topAppBar fixed>
22
<mdc-top-app-bar-row>
33
<mdc-top-app-bar-section align="start" title="Angular MDC">
4-
<mdc-icon mdcTopAppBarNavIcon (click)="appdrawer.open = !appdrawer.open" *ngIf="isScreenSmall() || topAppBar.isCollapsed()">menu</mdc-icon>
4+
<mdc-icon mdcTopAppBarNavIcon (click)="appdrawer.open = !appdrawer.open">menu</mdc-icon>
55
</mdc-top-app-bar-section>
66
<mdc-top-app-bar-section align="end">
77
<a mdcTopAppBarActionItem href="https://github.com/trimox/angular-mdc-web" alt="GitHub" target="_blank" rel="noopener noreferrer">
@@ -13,25 +13,25 @@
1313
</mdc-top-app-bar-row>
1414
</mdc-top-app-bar>
1515

16-
<div #mainContent>
17-
<mdc-drawer #appdrawer="mdcDrawer" [drawer]="isScreenSmall() || topAppBar.isCollapsed() ? 'modal' : 'permanent'" class="demo-drawer--fixed">
18-
<mdc-drawer-content>
19-
<mdc-list useActivatedClass>
20-
<mdc-list-item [routerLink]="['home']" routerLinkActive #rlaHome="routerLinkActive">Home</mdc-list-item>
21-
<mdc-list-divider></mdc-list-divider>
22-
<mdc-list-item (click)="startVisible = !startVisible">
23-
Getting Started
24-
<mdc-icon mdcListItemMeta>keyboard_arrow_{{startVisible ? 'down' : 'right'}}</mdc-icon>
25-
</mdc-list-item>
26-
<div *ngIf="startVisible">
27-
<mdc-list-item *ngFor="let item of startRoutes" [routerLink]="[item.route]" routerLinkActive #rlaCore="routerLinkActive">{{item.name}}</mdc-list-item>
28-
</div>
29-
<mdc-list-divider></mdc-list-divider>
30-
<mdc-list-item *ngFor="let navItem of navigationLinks" [routerLink]="[navItem.route]" routerLinkActive #rla="routerLinkActive">{{navItem.name}}</mdc-list-item>
31-
</mdc-list>
32-
</mdc-drawer-content>
33-
</mdc-drawer>
16+
<mdc-drawer class="demo-drawer" #appdrawer="mdcDrawer" open [drawer]="isScreenSmall() ? 'modal' : 'dismissible'" mdcTopAppBarFixedAdjust>
17+
<mdc-drawer-content>
18+
<mdc-list useActivatedClass>
19+
<mdc-list-item [routerLink]="['home']" routerLinkActive #rlaHome="routerLinkActive">Home</mdc-list-item>
20+
<mdc-list-divider></mdc-list-divider>
21+
<mdc-list-item (click)="startVisible = !startVisible">
22+
Getting Started
23+
<mdc-icon mdcListItemMeta>keyboard_arrow_{{startVisible ? 'down' : 'right'}}</mdc-icon>
24+
</mdc-list-item>
25+
<div *ngIf="startVisible">
26+
<mdc-list-item *ngFor="let item of startRoutes" [routerLink]="[item.route]" routerLinkActive #rlaCore="routerLinkActive">{{item.name}}</mdc-list-item>
27+
</div>
28+
<mdc-list-divider></mdc-list-divider>
29+
<mdc-list-item *ngFor="let navItem of navigationLinks" [routerLink]="[navItem.route]" routerLinkActive #rla="routerLinkActive">{{navItem.name}}</mdc-list-item>
30+
</mdc-list>
31+
</mdc-drawer-content>
32+
</mdc-drawer>
3433

34+
<div mdcDrawerAppContent mdcTopAppBarFixedAdjust>
3535
<router-outlet></router-outlet>
3636
</div>
3737

‎demos/app-layout.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,7 @@ export class AppLayout implements OnInit, OnDestroy {
5252
];
5353

5454
startRoutes = [
55-
{ name: 'Installation', route: 'getting-started' },
56-
{ name: 'Angular CLI', route: 'cli-guide' }
55+
{ name: 'Installation', route: 'getting-started' }
5756
];
5857

5958
constructor(

‎demos/components/dialog-demo/dialog-demo.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -241,6 +241,7 @@ <h3 class="demo-content__headline">Dialog service</h3>
241241
<button mdc-button (click)="openSimple()">Simple</button>
242242
<button mdc-button (click)="openConfirmation()">Confirmation</button>
243243
<button mdc-button (click)="openScrollable(true)">Scrollable</button>
244+
<button mdc-button (click)="openForm(true)">Form inputs</button>
244245
</div>
245246
</div>
246247

‎demos/components/dialog-demo/dialog-demo.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Component, Inject } from '@angular/core';
2+
import { FormControl, FormGroup, Validators } from '@angular/forms';
23

34
import { MdcDialog, MdcDialogRef, MDC_DIALOG_DATA } from '@angular-mdc/web';
45

@@ -58,6 +59,14 @@ export class DialogDemo {
5859
scrollable: scrollable
5960
});
6061
}
62+
63+
openForm() {
64+
const dialogRef = this.dialog.open(DialogForm, {
65+
escapeToClose: this.escapeToClose,
66+
clickOutsideToClose: this.clickOutsideToClose,
67+
scrollable: true
68+
});
69+
}
6170
}
6271

6372
@Component({
@@ -158,6 +167,22 @@ export class DialogScrollable {
158167
<mdc-dialog-container>
159168
<mdc-dialog-surface>
160169
<mdc-dialog-title>Phone ringtone</mdc-dialog-title>
170+
<mdc-dialog-content>
171+
<mdc-list>
172+
<mdc-list-item>
173+
<mdc-radio mdcListItemGraphic checked></mdc-radio>
174+
Never Gonna Give You Up
175+
</mdc-list-item>
176+
<mdc-list-item>
177+
<mdc-radio mdcListItemGraphic></mdc-radio>
178+
Hot Cross Buns
179+
</mdc-list-item>
180+
<mdc-list-item>
181+
<mdc-radio mdcListItemGraphic></mdc-radio>
182+
None
183+
</mdc-list-item>
184+
</mdc-list>
185+
</mdc-dialog-content>
161186
<mdc-dialog-actions>
162187
<button mdcDialogButton mdcDialogAction="close">Cancel</button>
163188
<button mdcDialogButton default mdcDialogAction="accept">Ok</button>
@@ -171,3 +196,26 @@ export class DialogConfirmation {
171196
constructor(public dialogRef: MdcDialogRef<DialogConfirmation>,
172197
@Inject(MDC_DIALOG_DATA) public data: DialogData) { }
173198
}
199+
200+
@Component({
201+
templateUrl: './dialog-form-demo.html'
202+
})
203+
export class DialogForm {
204+
constructor(public dialogRef: MdcDialogRef<DialogConfirmation>,
205+
@Inject(MDC_DIALOG_DATA) public data: DialogData) { }
206+
207+
profileForm = new FormGroup({
208+
first: new FormControl('', Validators.required),
209+
last: new FormControl('', Validators.required),
210+
middle: new FormControl(),
211+
dob: new FormControl('', [
212+
Validators.required, Validators.minLength(10), Validators.maxLength(10)]),
213+
email: new FormControl('', Validators.email)
214+
});
215+
216+
submit(): void {
217+
if(this.profileForm.valid) {
218+
this.dialogRef.close();
219+
}
220+
}
221+
}

‎demos/components/dialog-demo/dialog-example.module.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
DialogAlert,
88
DialogConfirmation,
99
DialogScrollable,
10+
DialogForm,
1011
DialogSimple
1112
} from './dialog-demo';
1213

@@ -18,12 +19,14 @@ import {
1819
declarations: [
1920
DialogAlert,
2021
DialogConfirmation,
22+
DialogForm,
2123
DialogScrollable,
2224
DialogSimple
2325
],
2426
entryComponents: [
2527
DialogAlert,
2628
DialogConfirmation,
29+
DialogForm,
2730
DialogScrollable,
2831
DialogSimple
2932
]

‎demos/components/dialog-demo/dialog-form-demo.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<mdc-dialog class="test-dialog--form">
2+
<mdc-dialog-container>
3+
<mdc-dialog-surface>
4+
<mdc-dialog-title>Create profile</mdc-dialog-title>
5+
<mdc-dialog-content>
6+
<form [formGroup]="profileForm" (ngSubmit)="submit()" autocomplete="off" class="demo-layout__column">
7+
<mdc-form-field>
8+
<mdc-text-field formControlName="first" label="First name" outlined required></mdc-text-field>
9+
<p mdcTextFieldHelperText persistent validation>*Required</p>
10+
</mdc-form-field>
11+
<mdc-form-field>
12+
<mdc-text-field formControlName="last" label="Last name" outlined required></mdc-text-field>
13+
<p mdcTextFieldHelperText persistent validation>*Required</p>
14+
</mdc-form-field>
15+
<div class="demo-layout__row--no-wrap">
16+
<mdc-form-field>
17+
<mdc-text-field formControlName="middle" label="Middle name" outlined></mdc-text-field>
18+
</mdc-form-field>
19+
<mdc-form-field>
20+
<mdc-text-field formControlName="dob" label="Birthdate" outlined type="date"
21+
required [helperText]="birthDateHelper"></mdc-text-field>
22+
<p mdcTextFieldHelperText #birthDateHelper="mdcHelperText" persistent validation>*Required</p>
23+
</mdc-form-field>
24+
</div>
25+
<mdc-form-field>
26+
<mdc-text-field type="email" formControlName="email" label="Email" maxlength="254" outlined></mdc-text-field>
27+
</mdc-form-field>
28+
</form>
29+
</mdc-dialog-content>
30+
<mdc-dialog-actions>
31+
<button mdcDialogButton mdcDialogAction="close">Cancel</button>
32+
<button mdcDialogButton type="submit" form="profileForm">Create</button>
33+
</mdc-dialog-actions>
34+
</mdc-dialog-surface>
35+
</mdc-dialog-container>
36+
</mdc-dialog>

‎demos/getting-started/cli-guide.html‎

Lines changed: 0 additions & 65 deletions
This file was deleted.

‎demos/getting-started/cli-guide.ts‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎demos/getting-started/getting-started.html‎

Lines changed: 39 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,65 @@
11
<div class="demo-page">
22
<div class="markdown-body">
3-
<h1>Getting Started</h1>
4-
Using Angular CLI? <a [routerLink]="['/cli-guide']">Angular CLI - Getting Started</a>
3+
<h1>Getting started</h1>
4+
<h2>Step 1: Install Angular CLI</h2>
5+
Already have @angular/cli installed? Skip to Step 2.
56

6-
<h2>Step 1: Install Angular MDC</h2>
77
<h4>npm</h4>
8-
<pre>npm i @angular-mdc/web</pre>
8+
<pre><code highlight lang="bash">npm i -g @angular/cli</code></pre>
9+
<h4>yarn</h4>
10+
<pre><code highlight lang="bash">yarn global add @angular/cli</code></pre>
11+
12+
<h2>Step 2: Create Project</h2>
13+
If generating a new project, you need to set default CSS preprocessor to SCSS:
14+
<pre><code highlight lang="bash">ng new your-project-name
15+
cd PROJECT-NAME</code></pre>
16+
17+
On existing projects, you need to set default CSS preprocessor to SCSS:
18+
<pre><code highlight>ng config schematics.@schematics/angular:component.styleext scss</code></pre>
19+
20+
<h2>Step 3: Install Angular MDC</h2>
21+
<h4>npm</h4>
22+
<pre><code highlight lang="bash">npm i @angular-mdc/web</code></pre>
923

1024
<h4>yarn</h4>
11-
<h4><pre>yarn add @angular-mdc/web</pre></h4>
25+
<pre><code highlight lang="bash">yarn add @angular-mdc/web</code></pre>
1226

13-
<h2>Step 2: Import components</h2>
27+
<h2>Step 4: Import Angular MDC Sass</h2>
28+
Edit src/styles.sass, and insert:
29+
<pre><code highlight lang="scss">
30+
$mdc-theme-primary: #1565c0; // primary color
31+
$mdc-theme-secondary: #388e3c; // secondary color
32+
33+
@import "~@angular-mdc/theme/material"
34+
</code></pre>
35+
36+
<h2>Step 5: Import Components</h2>
1437
Now just import the NgModule for each component you want to use.
15-
<pre><![CDATA[import {
38+
<pre><code highlight code="import {
1639
MdcFabModule,
40+
MdcIconModule,
1741
MdcMenuModule
1842
} from '@angular-mdc/web';
1943
2044
@NgModule({
2145
...
2246
imports: [
2347
MdcFabModule,
24-
MdcIconModule,
48+
MdcIconModule
2549
MdcMenuModule,
2650
...
2751
],
2852
...
2953
})
30-
export class ExampleModule { }]]></pre>
31-
32-
<h2>Step 3: Import Angular MDC Theme</h2>
33-
Import the Angular MDC theme into your project Sass:
34-
<pre><![CDATA[
35-
$mdc-theme-primary: #1565c0; // primary color
36-
$mdc-theme-secondary: #388e3c; // secondary color
37-
38-
@import "~@angular-mdc/theme/material";]]></pre>
54+
export class ExampleModule { }"></code></pre>
3955

40-
<h2>Step 4: Include Material Design Icons</h2>
41-
Add the <a href="https://material.io/icons/" target="_blank" rel="noopener noreferrer">Material Design Icons</a> collection to your index.html.
42-
<pre><![CDATA[<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">]]></pre>
56+
Open app.component.html and add the following markup:
57+
<pre><code highlight code="<button mdc-button raised>My Button</button>
4358
44-
<h2>Step 5: Include Roboto Font</h2>
45-
Add the Roboto font with 300, 400 and 500 weights to your index.html.
59+
<button mdc-fab>
60+
<mdc-icon>edit</mdc-icon>
61+
</button>"></code></pre>
4662

47-
<pre><![CDATA[<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">]]></pre>
63+
Run `ng serve` to run your application in develop mode, and navigate to http://localhost:4200
4864
</div>
4965
</div>

‎demos/getting-started/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
11
export * from './getting-started';
2-
export * from './cli-guide';

0 commit comments

Comments
 (0)