Skip to content

Commit ade0f86

Browse files
karakara
committed
chore(demos): update demos to use sidenav, navlist, and toolbar
1 parent 22c1ea3 commit ade0f86

File tree

4 files changed

+62
-26
lines changed

4 files changed

+62
-26
lines changed

‎src/components/list/list.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {Component, ViewEncapsulation, ContentChildren, ContentChild, QueryList,
22
ElementRef, Renderer, AfterContentInit} from 'angular2/core';
33

44
@Component({
5-
selector: 'md-list',
5+
selector: 'md-list, md-nav-list',
66
host: {'role': 'list'},
77
template: '<ng-content></ng-content>',
88
styleUrls: ['./components/list/list.css'],

‎src/demo-app/demo-app.html

Lines changed: 37 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,38 @@
1-
<div class="demo-root">
2-
<h1>Angular Material2 Demos</h1>
3-
<ul>
4-
<li><a [routerLink]="['ButtonDemo']">Button demo</a></li>
5-
<li><a [routerLink]="['CardDemo']">Card demo</a></li>
6-
<li><a [routerLink]="['ProgressCircleDemo']">Progress Circle demo</a></li>
7-
<li><a [routerLink]="['ProgressBarDemo']">Progress Bar demo</a></li>
8-
<li><a [routerLink]="['PortalDemo']">Portal demo</a></li>
9-
<li><a [routerLink]="['OverlayDemo']">Overlay demo</a></li>
10-
<li><a [routerLink]="['CheckboxDemo']">Checkbox demo</a></li>
11-
<li><a [routerLink]="['InputDemo']">Input demo</a></li>
12-
<li><a [routerLink]="['ToolbarDemo']">Toolbar demo</a></li>
13-
<li><a [routerLink]="['RadioDemo']">Radio demo</a></li>
14-
<li><a [routerLink]="['ListDemo']">List demo</a></li>
15-
<li><a [routerLink]="['LiveAnnouncerDemo']">Live Announcer demo</a></li>
16-
<li><a [routerLink]="['SidenavDemo']">Sidenav demo</a></li>
17-
<li><a [routerLink]="['GesturesDemo']">Gestures demo</a></li>
18-
</ul>
19-
<button md-raised-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')">
20-
{{root.dir.toUpperCase()}}
21-
</button>
22-
<div #root="$implicit" dir="ltr" class="demo-content">
23-
<router-outlet></router-outlet>
1+
<md-sidenav-layout>
2+
<md-sidenav #start>
3+
<md-nav-list>
4+
<md-list-item><a md-line [routerLink]="['ButtonDemo']">Button</a></md-list-item>
5+
<md-list-item><a md-line [routerLink]="['CardDemo']">Card</a></md-list-item>
6+
<md-list-item><a md-line [routerLink]="['ProgressCircleDemo']">Progress Circle</a></md-list-item>
7+
<md-list-item><a md-line [routerLink]="['ProgressBarDemo']">Progress Bar</a></md-list-item>
8+
<md-list-item><a md-line [routerLink]="['PortalDemo']">Portal</a></md-list-item>
9+
<md-list-item><a md-line [routerLink]="['OverlayDemo']">Overlay</a></md-list-item>
10+
<md-list-item><a md-line [routerLink]="['CheckboxDemo']">Checkbox</a></md-list-item>
11+
<md-list-item><a md-line [routerLink]="['InputDemo']">Input</a></md-list-item>
12+
<md-list-item><a md-line [routerLink]="['ToolbarDemo']">Toolbar</a></md-list-item>
13+
<md-list-item><a md-line [routerLink]="['RadioDemo']">Radio</a></md-list-item>
14+
<md-list-item><a md-line [routerLink]="['ListDemo']">List</a></md-list-item>
15+
<md-list-item><a md-line [routerLink]="['LiveAnnouncerDemo']">Live Announcer</a></md-list-item>
16+
<md-list-item><a md-line [routerLink]="['SidenavDemo']">Sidenav</a></md-list-item>
17+
<md-list-item><a md-line [routerLink]="['GesturesDemo']">Gestures</a></md-list-item>
18+
</md-nav-list>
19+
<button md-raised-button (click)="start.close()">CLOSE</button>
20+
</md-sidenav>
21+
<div class="demo-root">
22+
23+
<md-toolbar color="primary">
24+
<i class="material-icons" (click)="start.open()">menu</i>
25+
<div class="demo-toolbar">
26+
<h1>Angular Material 2 Demos</h1>
27+
<button md-raised-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')">
28+
{{root.dir.toUpperCase()}}
29+
</button>
30+
</div>
31+
</md-toolbar>
32+
33+
34+
<div #root="$implicit" dir="ltr" class="demo-content">
35+
<router-outlet></router-outlet>
36+
</div>
2437
</div>
25-
</div>
38+
</md-sidenav-layout>

‎src/demo-app/demo-app.scss

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,33 @@
11
.demo-root {
22
font-family: Roboto, 'Helvetica Neue', sans-serif;
33
padding: 20px;
4+
min-height: 1000px;
45

56
// Helps fonts on OSX looks more consistent with other systems
67
// Isn't currently in button styles due to performance concerns
78
* {
89
-webkit-font-smoothing: antialiased;
910
-moz-osx-font-smoothing: grayscale;
1011
}
12+
13+
md-toolbar {
14+
15+
i {
16+
padding: 20px;
17+
cursor: pointer;
18+
}
19+
20+
.demo-toolbar {
21+
display: flex;
22+
justify-content: space-between;
23+
width: 100%;
24+
}
25+
}
26+
27+
h1 {
28+
font-size: 20px;
29+
}
30+
1131
}
1232

1333
.demo-content {

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ import {ProgressCircleDemo} from './progress-circle/progress-circle-demo';
99
import {CheckboxDemo} from './checkbox/checkbox-demo';
1010
import {Dir} from '../core/rtl/dir';
1111
import {MdButton} from '../components/button/button';
12+
import {MD_SIDENAV_DIRECTIVES} from '../components/sidenav/sidenav';
13+
import {MD_LIST_DIRECTIVES} from '../components/list/list';
14+
import {MdToolbar} from '../components/toolbar/toolbar';
1215
import {PortalDemo} from './portal/portal-demo';
1316
import {ToolbarDemo} from './toolbar/toolbar-demo';
1417
import {OverlayDemo} from './overlay/overlay-demo';
@@ -28,7 +31,7 @@ export class Home {}
2831
providers: [],
2932
templateUrl: 'demo-app/demo-app.html',
3033
styleUrls: ['demo-app/demo-app.css'],
31-
directives: [ROUTER_DIRECTIVES, Dir, MdButton],
34+
directives: [ROUTER_DIRECTIVES, Dir, MdButton, MD_SIDENAV_DIRECTIVES, MD_LIST_DIRECTIVES, MdToolbar],
3235
pipes: []
3336
})
3437
@RouteConfig([

0 commit comments

Comments
 (0)