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

Commit 9c535ca

Browse files
trimoxtrimox
authored
docs(demos): Updates and more examples (#1682)
Closes #1679 Closes #1670
1 parent 84451c1 commit 9c535ca

File tree

14 files changed

+151
-51
lines changed

14 files changed

+151
-51
lines changed

‎demos/src/app/components/drawer-demo/drawer-demo.ts‎

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export class Examples {
6969
@include mdc-drawer-item-activated-icon-ink-color(pink);
7070
}`;
7171

72-
example1 = {
72+
examplePerm = {
7373
html: `<mdc-drawer drawer="permanent">
7474
<mdc-drawer-header title="Drawer Title" subtitle="Subtitle"></mdc-drawer-header>
7575
<mdc-drawer-content>
@@ -102,7 +102,7 @@ export class Examples {
102102
sass: this.genericSass
103103
};
104104

105-
example2 = {
105+
exampleDismissible = {
106106
html: `<mdc-drawer drawer="dismissible">
107107
<mdc-drawer-header title="Drawer Title" subtitle="Subtitle"></mdc-drawer-header>
108108
<mdc-drawer-content>
@@ -115,14 +115,14 @@ export class Examples {
115115
</mdc-drawer>
116116
<div mdcDrawerAppContent>
117117
Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo et. Diam phaedrum ei mea, quaeque
118-
voluptaria efficiantur duo no. Eu adhuc veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an
118+
voluptaria efficiantur duo no. Eu adhuc veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit.
119119
legere iriure blandit. Veri iisque accusamus an pri.
120120
</div>`,
121121
ts: this.genericTS,
122122
sass: this.genericSass
123123
};
124124

125-
example3 = {
125+
exampleModal = {
126126
html: `<mdc-drawer drawer="modal" open>
127127
<mdc-drawer-header>
128128
<h3 mdcDrawerTitle>Drawer Title</h3>
@@ -138,14 +138,14 @@ export class Examples {
138138
</mdc-drawer>
139139
<div>
140140
Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo et. Diam phaedrum ei mea, quaeque
141-
voluptaria efficiantur duo no. Eu adhuc veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an
141+
voluptaria efficiantur duo no. Eu adhuc veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit.
142142
legere iriure blandit. Veri iisque accusamus an pri.
143143
</div>`,
144144
ts: this.genericTS,
145145
sass: this.genericSass
146146
};
147147

148-
example4 = {
148+
exampleRtl = {
149149
html: `<mdc-drawer drawer="modal" dir="rtl">
150150
<mdc-drawer-header>
151151
<h3 mdcDrawerTitle>Drawer Title</h3>
@@ -161,12 +161,32 @@ export class Examples {
161161
</mdc-drawer>
162162
<div>
163163
Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo et. Diam phaedrum ei mea, quaeque
164-
voluptaria
165164
efficiantur duo no. Eu adhuc veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an legere
166-
iriure blandit.
167165
Veri iisque accusamus an pri.
168166
</div>`,
169167
ts: this.genericTS,
170168
sass: this.genericSass
171169
};
170+
171+
exampleShaped = {
172+
html: `<mdc-drawer drawer="permanent">
173+
<mdc-drawer-header title="Drawer Title" subtitle="Subtitle"></mdc-drawer-header>
174+
<mdc-drawer-content>
175+
<mdc-list useActivatedClass class="demo-list--shaped">
176+
<a mdc-list-item *ngFor="let item of destinations" href="#/drawer-demo/examples">
177+
<mdc-icon mdcListItemGraphic *ngIf="item.icon">{{item.icon}}</mdc-icon>{{item.label}}
178+
</a>
179+
</mdc-list>
180+
</mdc-drawer-content>
181+
</mdc-drawer>
182+
<div>
183+
Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo et. Diam phaedrum ei mea,
184+
voluptaria efficiantur duo no. Eu adhuc veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit.
185+
legere iriure blandit. Veri iisque accusamus an pri.
186+
</div>`,
187+
ts: this.genericTS,
188+
sass: `.demo-list--shaped {
189+
@include mdc-list-item-shape-radius(0 50px 50px 0);
190+
}`
191+
};
172192
}

‎demos/src/app/components/drawer-demo/examples.html‎

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ <h6 mdcListGroupSubheader>Labels</h6>
3939
<button mdc-button (click)="alternateColors(demoPermanent, 'demo-drawer--custom')">Custom Colors</button>
4040
<button mdc-button (click)="alternateColors(demoPermanent, 'demo-drawer--accessible')">Accessible Colors</button>
4141
</div>
42-
<example-viewer [example]="example1"></example-viewer>
42+
<example-viewer [example]="examplePerm"></example-viewer>
4343
</div>
4444

4545
<div class="demo-content">
@@ -66,7 +66,7 @@ <h3 class="demo-content__headline">Dismissible</h3>
6666
<button mdc-button (click)="alternateColors(demoDismissible, 'demo-drawer--custom')">Custom Colors</button>
6767
<button mdc-button (click)="alternateColors(demoDismissible, 'demo-drawer--accessible')">Accessible Colors</button>
6868
</div>
69-
<example-viewer [example]="example2"></example-viewer>
69+
<example-viewer [example]="exampleDismissible"></example-viewer>
7070
</div>
7171

7272
<div class="demo-content">
@@ -96,7 +96,7 @@ <h6 mdcDrawerSubtitle>Subtitle</h6>
9696
<button mdc-button (click)="alternateColors(demoModal, 'demo-drawer--custom')">Custom Colors</button>
9797
<button mdc-button (click)="alternateColors(demoModal, 'demo-drawer--accessible')">Accessible Colors</button>
9898
</div>
99-
<example-viewer [example]="example3"></example-viewer>
99+
<example-viewer [example]="exampleModal"></example-viewer>
100100
</div>
101101

102102
<div class="demo-content">
@@ -128,5 +128,27 @@ <h6 mdcDrawerSubtitle>Subtitle</h6>
128128
<button mdc-button (click)="alternateColors(demoRTL, 'demo-drawer--custom')">Custom Colors</button>
129129
<button mdc-button (click)="alternateColors(demoRTL, 'demo-drawer--accessible')">Accessible Colors</button>
130130
</div>
131-
<example-viewer [example]="example4"></example-viewer>
132-
</div>
131+
<example-viewer [example]="exampleRtl"></example-viewer>
132+
</div>
133+
134+
<div class="demo-content">
135+
<h3 class="demo-content__headline">Shaped</h3>
136+
<div class="demo-layout__row--no-wrap demo-drawer-app">
137+
<mdc-drawer drawer="permanent" #demoPermanent>
138+
<mdc-drawer-header title="Drawer Title" subtitle="Subtitle"></mdc-drawer-header>
139+
<mdc-drawer-content>
140+
<mdc-list useActivatedClass class="demo-list--shaped">
141+
<a mdc-list-item *ngFor="let item of destinations" href="#/drawer-demo/examples">
142+
<mdc-icon mdcListItemGraphic *ngIf="item.icon">{{item.icon}}</mdc-icon>{{item.label}}
143+
</a>
144+
</mdc-list>
145+
</mdc-drawer-content>
146+
</mdc-drawer>
147+
<div class="demo-drawer-app-content">
148+
Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo et. Diam phaedrum ei mea, quaeque
149+
voluptaria efficiantur duo no. Eu adhuc veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an
150+
legere iriure blandit. Veri iisque accusamus an pri.
151+
</div>
152+
</div>
153+
<example-viewer [example]="exampleShaped"></example-viewer>
154+
</div>

‎demos/src/app/components/list-demo/examples.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,22 @@ <h3 mdcListGroupSubheader>Files</h3>
3030
<example-viewer [example]="example1"></example-viewer>
3131
</div>
3232

33+
<div class="demo-content">
34+
<h3 class="demo-content__headline">Shaped</h3>
35+
<mdc-list class="demo-list--shaped" singleSelection>
36+
<mdc-list-item>
37+
<mdc-icon mdcListItemGraphic>network_wifi</mdc-icon>Wi-Fi
38+
</mdc-list-item>
39+
<mdc-list-item>
40+
<mdc-icon mdcListItemGraphic>bluetooth</mdc-icon>Bluetooth
41+
</mdc-list-item>
42+
<mdc-list-item>
43+
<mdc-icon mdcListItemGraphic>data_usage</mdc-icon>Data Usage
44+
</mdc-list-item>
45+
</mdc-list>
46+
<example-viewer [example]="exampleShaped"></example-viewer>
47+
</div>
48+
3349
<div class="demo-content">
3450
<h3 class="demo-content__headline">Single-Line</h3>
3551
<div class="demo-layout__row">

‎demos/src/app/components/list-demo/list-demo.ts‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export class Examples {
5858
</mdc-list-item>
5959
</mdc-list>
6060
</mdc-list-group>`,
61-
ts: `folders = [
61+
ts: `folders = [
6262
{ name: 'Photos', icon: 'folder', addDate: 'Jan 9, 2015' },
6363
{ name: 'Recipes', icon: 'folder', addDate: 'Jan 17, 2015' },
6464
{ name: 'Work', icon: 'folder', addDate: 'Jan 28, 2015' }
@@ -213,4 +213,21 @@ files = [
213213
</mdc-list>
214214
</mdc-list-group>`
215215
};
216+
217+
exampleShaped = {
218+
html: `<mdc-list class="demo-list--shaped" singleSelection>
219+
<mdc-list-item>
220+
<mdc-icon mdcListItemGraphic>network_wifi</mdc-icon>Wi-Fi
221+
</mdc-list-item>
222+
<mdc-list-item>
223+
<mdc-icon mdcListItemGraphic>bluetooth</mdc-icon>Bluetooth
224+
</mdc-list-item>
225+
<mdc-list-item>
226+
<mdc-icon mdcListItemGraphic>data_usage</mdc-icon>Data Usage
227+
</mdc-list-item>
228+
</mdc-list>`,
229+
sass: `.demo-list--shaped {
230+
@include mdc-list-item-shape-radius(0 50px 50px 0);
231+
}`
232+
};
216233
}

‎demos/src/app/components/menu-demo/examples.html‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,9 @@ <h3 class="demo-content__headline">Anchor Margin</h3>
4848
<mdc-menu #demo (selected)="onMenuSelect($event)" [anchorElement]="demoAnchor" [anchorCorner]="menuSurfaceAnchorCorner.value"
4949
[quickOpen]="quickOpen.checked" [fixed]="fixed.checked" [wrapFocus]="wrapFocus.checked" [anchorMargin]="{top: marginTop.value, bottom: marginBottom.value, left: marginLeft.value, right: marginRight.value}">
5050
<mdc-list>
51-
<ng-container *ngFor="let fruit of fruits">
52-
<ng-container [ngSwitch]="!!fruit.label">
53-
<mdc-list-item *ngSwitchCase="true">{{fruit.label}}</mdc-list-item>
54-
<mdc-list-divider *ngSwitchCase="false"></mdc-list-divider>
55-
</ng-container>
51+
<ng-container *ngFor="let fruit of fruits" [ngSwitch]="!!fruit.label">
52+
<mdc-list-item *ngSwitchCase="true">{{fruit.label}}</mdc-list-item>
53+
<mdc-list-divider *ngSwitchCase="false"></mdc-list-divider>
5654
</ng-container>
5755
</mdc-list>
5856
</mdc-menu>

‎demos/src/app/components/menu-demo/menu-demo.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -63,11 +63,9 @@ export class Examples {
6363
6464
<mdc-menu #demo [anchorElement]="demoAnchor" (selected)="onMenuSelect($event)">
6565
<mdc-list>
66-
<ng-container *ngFor="let fruit of fruits">
67-
<ng-container [ngSwitch]="!!fruit.label">
68-
<mdc-list-item *ngSwitchCase="true">{{fruit.label}}</mdc-list-item>
69-
<mdc-list-divider *ngSwitchCase="false"></mdc-list-divider>
70-
</ng-container>
66+
<ng-container *ngFor="let fruit of fruits" [ngSwitch]="!!fruit.label">
67+
<mdc-list-item *ngSwitchCase="true">{{fruit.label}}</mdc-list-item>
68+
<mdc-list-divider *ngSwitchCase="false"></mdc-list-divider>
7169
</ng-container>
7270
</mdc-list>
7371
</mdc-menu>

‎demos/src/app/components/typography-demo/examples.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515

1616
<div class="demo-content">
1717
<div mdcSubtitle1>Subtitle 1</div>
18-
<div mdcSubtitle1>Subtitle 2</div>
18+
<div mdcSubtitle2>Subtitle 2</div>
1919
<example-viewer [example]="exampleSubtitle"></example-viewer>
2020
</div>
2121

‎demos/src/app/components/typography-demo/typography-demo.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export class Examples {
6767

6868
exampleSubtitle = {
6969
html: `<div mdcSubtitle1>Subtitle 1</div>
70-
<div mdcSubtitle1>Subtitle 2</div>`
70+
<div mdcSubtitle2>Subtitle 2</div>`
7171
};
7272

7373
exampleBody = {

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

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="demo-panel-content">
22
<div class="demo-panel-transition">
33
<h1>Getting started</h1>
4-
<p>For help getting started with a new Angular app, check out the <a href="https://cli.angular.io/" target="_blank" rel="noopener noreferrer">Angular CLI</a>.</p>
4+
<p>For help getting started with a new Angular app, check out the <a href="https://cli.angular.io/" target="_blank" rel="noopener">Angular CLI</a>.</p>
55
<p>For existing apps, follow these steps to begin using Angular MDC.</p>
66
<h2>Step 1: Install Angular MDC</h2>
77
<h4>npm</h4>
@@ -10,14 +10,28 @@ <h4>npm</h4>
1010
<h4>yarn</h4>
1111
<pre><code highlight="yarn add @angular-mdc/web"></code></pre>
1212

13-
<h2>Step 2: Import MDC Sass</h2>
14-
Edit styles.scss, and add the following:
15-
<pre><code highlight="$mdc-theme-primary: #1565c0; // primary color
16-
$mdc-theme-secondary: #388e3c; // secondary color
1713

18-
@import '~@angular-mdc/theme/material'"></code></pre>
14+
<h2>Step 2: Use Roboto font</h2>
15+
To get started, first include the Roboto font with the 300, 400 and 500 weights.
16+
You can host it yourself or include it from <a href="https://fonts.google.com/" target="_blank" rel="noopener">Google Fonts:</a>
1917

20-
<h2>Step 3: Import component modules</h2>
18+
<pre><code [highlight]="robotoLink"></code></pre>
19+
20+
21+
<h2>Step 3 (optional): Add Material Icons</h2>
22+
If you want to use the <code>mdc-icon</code> component with the official Material Design Icons, load the icon font in your index.html:
23+
24+
<pre><code [highlight]="materialIconsLink"></code></pre>
25+
26+
For more information on using Material Icons, check out the <a href="https://material.io/tools/icons/?style=baseline" target="_blank" rel="noopener">Material Icons Guide.</a>
27+
Note that mdc-icon supports any font or svg icons; using Material Icons is one of many options.
28+
29+
<h2>Step 4: Import MDC Sass</h2>
30+
In styles.scss add the following:
31+
32+
<pre><code [highlight]="sassHelp"></code></pre>
33+
34+
<h2>Step 5: Import component modules</h2>
2135
Now just import the NgModule for each component you want to use.
2236
<pre><code highlight="import {
2337
MdcFabModule,

‎demos/src/app/getting-started/getting-started.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,11 @@ import { Component } from '@angular/core';
33
@Component({
44
templateUrl: './getting-started.html'
55
})
6-
export class GettingStarted { }
6+
export class GettingStarted {
7+
materialIconsLink = `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"`;
8+
robotoLink = `<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">`;
9+
sassHelp = `$mdc-theme-primary: #1565c0; // primary color
10+
$mdc-theme-secondary: #388e3c; // secondary color
11+
12+
@import "~@angular-mdc/theme/material";`;
13+
}

0 commit comments

Comments
 (0)