Skip to content

Commit 6840090

Browse files
mmalerbammalerba
committed
create sidenav demo
1 parent 26e8c90 commit 6840090

File tree

7 files changed

+146
-46
lines changed

7 files changed

+146
-46
lines changed

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,11 +46,11 @@ export class DemoApp {
4646
dark = false;
4747
navItems = [
4848
{name: 'Autocomplete', route: '/autocomplete'},
49-
{name: 'Button', route: '/button'},
5049
{name: 'Button Toggle', route: '/button-toggle'},
50+
{name: 'Button', route: '/button'},
5151
{name: 'Card', route: '/card'},
52-
{name: 'Chips', route: '/chips'},
5352
{name: 'Checkbox', route: '/checkbox'},
53+
{name: 'Chips', route: '/chips'},
5454
{name: 'Datepicker', route: '/datepicker'},
5555
{name: 'Dialog', route: '/dialog'},
5656
{name: 'Drawer', route: '/drawer'},
@@ -60,24 +60,25 @@ export class DemoApp {
6060
{name: 'Icon', route: '/icon'},
6161
{name: 'Input', route: '/input'},
6262
{name: 'List', route: '/list'},
63-
{name: 'Menu', route: '/menu'},
6463
{name: 'Live Announcer', route: '/live-announcer'},
64+
{name: 'Menu', route: '/menu'},
6565
{name: 'Overlay', route: '/overlay'},
66+
{name: 'Platform', route: '/platform'},
6667
{name: 'Portal', route: '/portal'},
6768
{name: 'Progress Bar', route: '/progress-bar'},
6869
{name: 'Progress Spinner', route: '/progress-spinner'},
6970
{name: 'Radio', route: '/radio'},
7071
{name: 'Ripple', route: '/ripple'},
7172
{name: 'Select', route: '/select'},
72-
{name: 'Slider', route: '/slider'},
73+
{name: 'Sidenav', route: '/sidenav'},
7374
{name: 'Slide Toggle', route: '/slide-toggle'},
75+
{name: 'Slider', route: '/slider'},
7476
{name: 'Snack Bar', route: '/snack-bar'},
77+
{name: 'Style', route: '/style'},
7578
{name: 'Table', route: '/table'},
7679
{name: 'Tabs', route: '/tabs'},
7780
{name: 'Toolbar', route: '/toolbar'},
7881
{name: 'Tooltip', route: '/tooltip'},
79-
{name: 'Platform', route: '/platform'},
80-
{name: 'Style', route: '/style'},
8182
{name: 'Typography', route: '/typography'}
8283
];
8384

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

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import {
4646
OverlayContainer,
4747
} from '@angular/material';
4848
import {TableHeaderDemo} from '../table/table-header-demo';
49+
import {SidenavDemo} from '../sidenav/sidenav-demo';
4950

5051
@NgModule({
5152
imports: [
@@ -61,49 +62,50 @@ import {TableHeaderDemo} from '../table/table-header-demo';
6162
ButtonDemo,
6263
ButtonToggleDemo,
6364
CardDemo,
64-
ChipsDemo,
6565
CheckboxDemo,
66+
ChipsDemo,
67+
ContentElementDialog,
6668
DatepickerDemo,
6769
DemoApp,
6870
DialogDemo,
71+
DrawerDemo,
72+
ExpansionDemo,
73+
FoggyTabContent,
6974
GesturesDemo,
7075
GridListDemo,
7176
Home,
7277
IconDemo,
78+
IFrameDialog,
7379
InputDemo,
7480
JazzDialog,
75-
ContentElementDialog,
76-
IFrameDialog,
7781
ListDemo,
7882
LiveAnnouncerDemo,
7983
MdCheckboxDemoNestedChecklist,
8084
MenuDemo,
81-
SnackBarDemo,
8285
OverlayDemo,
86+
PlatformDemo,
8387
PortalDemo,
8488
ProgressBarDemo,
8589
ProgressSpinnerDemo,
8690
RadioDemo,
91+
RainyTabContent,
8792
RippleDemo,
8893
RotiniPanel,
8994
ScienceJoke,
9095
SelectDemo,
91-
DrawerDemo,
96+
SidenavDemo,
9297
SliderDemo,
9398
SlideToggleDemo,
99+
SnackBarDemo,
94100
SpagettiPanel,
95101
StyleDemo,
102+
SunnyTabContent,
103+
TableDemo,
96104
TableHeaderDemo,
105+
TabsDemo,
97106
ToolbarDemo,
98107
TooltipDemo,
99-
TableDemo,
100-
TabsDemo,
101-
SunnyTabContent,
102-
RainyTabContent,
103-
FoggyTabContent,
104-
PlatformDemo,
105108
TypographyDemo,
106-
ExpansionDemo,
107109
],
108110
providers: [
109111
{provide: OverlayContainer, useClass: FullscreenOverlayContainer},

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

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -39,45 +39,47 @@ import {ExpansionDemo} from '../expansion/expansion-demo';
3939
import {DemoApp} from './demo-app';
4040
import {AccessibilityDemo} from '../a11y/a11y';
4141
import {ACCESSIBILITY_DEMO_ROUTES} from '../a11y/routes';
42+
import {SidenavDemo} from '../sidenav/sidenav-demo';
4243

4344
export const DEMO_APP_ROUTES: Routes = [
4445
{path: '', component: DemoApp, children: [
4546
{path: '', component: Home},
4647
{path: 'autocomplete', component: AutocompleteDemo},
48+
{path: 'baseline', component: BaselineDemo},
4749
{path: 'button', component: ButtonDemo},
50+
{path: 'button-toggle', component: ButtonToggleDemo},
4851
{path: 'card', component: CardDemo},
52+
{path: 'checkbox', component: CheckboxDemo},
4953
{path: 'chips', component: ChipsDemo},
50-
{path: 'table', component: TableDemo},
5154
{path: 'datepicker', component: DatepickerDemo},
52-
{path: 'radio', component: RadioDemo},
53-
{path: 'select', component: SelectDemo},
55+
{path: 'dialog', component: DialogDemo},
5456
{path: 'drawer', component: DrawerDemo},
55-
{path: 'slide-toggle', component: SlideToggleDemo},
56-
{path: 'slider', component: SliderDemo},
57-
{path: 'progress-spinner', component: ProgressSpinnerDemo},
58-
{path: 'progress-bar', component: ProgressBarDemo},
59-
{path: 'portal', component: PortalDemo},
60-
{path: 'overlay', component: OverlayDemo},
61-
{path: 'checkbox', component: CheckboxDemo},
62-
{path: 'input', component: InputDemo},
63-
{path: 'toolbar', component: ToolbarDemo},
57+
{path: 'expansion', component: ExpansionDemo},
58+
{path: 'gestures', component: GesturesDemo},
59+
{path: 'grid-list', component: GridListDemo},
6460
{path: 'icon', component: IconDemo},
61+
{path: 'input', component: InputDemo},
6562
{path: 'list', component: ListDemo},
66-
{path: 'menu', component: MenuDemo},
6763
{path: 'live-announcer', component: LiveAnnouncerDemo},
68-
{path: 'gestures', component: GesturesDemo},
69-
{path: 'grid-list', component: GridListDemo},
70-
{path: 'tabs', component: TabsDemo, children: TABS_DEMO_ROUTES},
71-
{path: 'button-toggle', component: ButtonToggleDemo},
72-
{path: 'baseline', component: BaselineDemo},
64+
{path: 'menu', component: MenuDemo},
65+
{path: 'overlay', component: OverlayDemo},
66+
{path: 'platform', component: PlatformDemo},
67+
{path: 'portal', component: PortalDemo},
68+
{path: 'progress-bar', component: ProgressBarDemo},
69+
{path: 'progress-spinner', component: ProgressSpinnerDemo},
70+
{path: 'radio', component: RadioDemo},
7371
{path: 'ripple', component: RippleDemo},
74-
{path: 'dialog', component: DialogDemo},
75-
{path: 'tooltip', component: TooltipDemo},
72+
{path: 'select', component: SelectDemo},
73+
{path: 'sidenav', component: SidenavDemo},
74+
{path: 'slide-toggle', component: SlideToggleDemo},
75+
{path: 'slider', component: SliderDemo},
7676
{path: 'snack-bar', component: SnackBarDemo},
77-
{path: 'platform', component: PlatformDemo},
7877
{path: 'style', component: StyleDemo},
78+
{path: 'table', component: TableDemo},
79+
{path: 'tabs', component: TabsDemo, children: TABS_DEMO_ROUTES},
80+
{path: 'toolbar', component: ToolbarDemo},
81+
{path: 'tooltip', component: TooltipDemo},
7982
{path: 'typography', component: TypographyDemo},
80-
{path: 'expansion', component: ExpansionDemo},
8183
]}
8284
];
8385

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<button md-raised-button (click)="isLaunched = true" *ngIf="!isLaunched" color="primary">
2+
Launch Fullscreen Sidenav Demo
3+
</button>
4+
5+
<div class="demo-sidenav-area" *ngIf="isLaunched">
6+
<md-sidenav-container>
7+
<md-sidenav #start (open)="myinput.focus()" mode="side">
8+
Start Side Sidenav
9+
<br>
10+
<button md-button (click)="start.close()">Close</button>
11+
<br>
12+
<button md-button (click)="end.open()">Open End Side</button>
13+
<br>
14+
<button md-button
15+
(click)="start.mode = (start.mode == 'push' ? 'over' : (start.mode == 'over' ? 'side' : 'push'))">Toggle Mode</button>
16+
<div>Mode: {{start.mode}}</div>
17+
<br>
18+
<input #myinput>
19+
<div class="demo-filler-content" *ngFor="let c of fillerContent">Filler Content</div>
20+
</md-sidenav>
21+
22+
<md-sidenav #end position="end">
23+
End Side Sidenav
24+
<br>
25+
<button md-button (click)="end.close()">Close</button>
26+
<div class="demo-filler-content" *ngFor="let c of fillerContent">Filler Content</div>
27+
</md-sidenav>
28+
29+
<md-sidenav-content>
30+
<div>
31+
<button md-raised-button (click)="isLaunched = false">
32+
Exit Fullscreen Sidenav Demo
33+
</button>
34+
</div>
35+
36+
<div>
37+
<h3>Sidenav</h3>
38+
<button md-button (click)="start.toggle()">Toggle Start Side Sidenav</button>
39+
<button md-button (click)="end.toggle()">Toggle End Side Sidenav</button>
40+
<button md-button>Toggle fixed mode</button>
41+
<button md-button>Toggle fixed covers header/footer</button>
42+
</div>
43+
44+
<div>
45+
<h3>Header / Footer</h3>
46+
<button md-button>Toggle header</button>
47+
<button md-button>Toggle footer</button>
48+
</div>
49+
50+
<div class="demo-filler-content" *ngFor="let c of fillerContent">Filler Content</div>
51+
</md-sidenav-content>
52+
</md-sidenav-container>
53+
</div>

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.demo-sidenav-area {
2+
position: fixed;
3+
top: 0;
4+
bottom: 0;
5+
left: 0;
6+
right: 0;
7+
8+
.mat-sidenav-container {
9+
position: absolute;
10+
top: 0;
11+
bottom: 0;
12+
left: 0;
13+
right: 0;
14+
}
15+
16+
.mat-sidenav-content {
17+
padding: 32px;
18+
}
19+
20+
.demo-filler-content {
21+
padding: 60px;
22+
}
23+
}

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {Component, ViewEncapsulation} from '@angular/core';
2+
3+
4+
@Component({
5+
moduleId: module.id,
6+
selector: 'sidenav-demo',
7+
templateUrl: 'sidenav-demo.html',
8+
styleUrls: ['sidenav-demo.css'],
9+
encapsulation: ViewEncapsulation.None,
10+
})
11+
export class SidenavDemo {
12+
isLaunched = false;
13+
fillerContent = Array(30);
14+
}

‎src/lib/sidenav/drawer.scss

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,21 @@
33
@import '../core/style/layout-common';
44
@import '../core/a11y/a11y';
55

6+
$mat-drawer-content-z-index: 1;
7+
$mat-drawer-side-drawer-z-index: 2;
8+
$mat-drawer-backdrop-z-index: 3;
9+
$mat-drawer-over-drawer-z-index: 4;
10+
611
// stylelint-disable max-line-length
712
// Mixin that creates a new stacking context.
813
// see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
914
// stylelint-enable
10-
@mixin mat-drawer-stacking-context() {
15+
@mixin mat-drawer-stacking-context($z-index:1) {
1116
position: relative;
1217

1318
// Use a z-index to create a new stacking context. (We can't use transform because it breaks fixed
1419
// positioning inside of the transformed element).
15-
z-index: 1;
20+
z-index: $z-index;
1621
}
1722

1823
.mat-drawer-container {
@@ -48,7 +53,7 @@
4853

4954
// Because of the new stacking context, the z-index stack is new and we can use our own
5055
// numbers.
51-
z-index: 2;
56+
z-index: $mat-drawer-backdrop-z-index;
5257

5358
// We use 'visibility: hidden | visible' because 'display: none' will not animate any
5459
// transitions, while visibility will interpolate transitions properly.
@@ -66,15 +71,15 @@
6671
}
6772

6873
.mat-drawer-content {
69-
@include mat-drawer-stacking-context();
74+
@include mat-drawer-stacking-context($mat-drawer-content-z-index);
7075

7176
display: block;
7277
height: 100%;
7378
overflow: auto;
7479
}
7580

7681
.mat-drawer {
77-
@include mat-drawer-stacking-context();
82+
@include mat-drawer-stacking-context($mat-drawer-over-drawer-z-index);
7883

7984
display: block;
8085
position: absolute;
@@ -89,7 +94,7 @@
8994
transform: translate3d(-100%, 0, 0);
9095

9196
&.mat-drawer-side {
92-
z-index: 1;
97+
z-index: $mat-drawer-side-drawer-z-index;
9398
}
9499

95100
&.mat-drawer-end {

0 commit comments

Comments
 (0)