Skip to content

Commit 753e40d

Browse files
sllethesllethe
committed
add app-demo for sticky-header
1 parent 279983b commit 753e40d

File tree

10 files changed

+604
-4
lines changed

10 files changed

+604
-4
lines changed

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,9 +74,11 @@ import {
7474
MdToolbarModule,
7575
MdTooltipModule,
7676
OverlayContainer,
77-
StyleModule
77+
StyleModule,
78+
MdStickyHeaderModule,
7879
} from '@angular/material';
7980
import {TableHeaderDemo} from './data-table/table-header-demo';
81+
import {StickyHeaderDemo} from './sticky-header/sticky-header-demo';
8082

8183
/**
8284
* NgModule that includes all Material modules that are required to serve the demo-app.
@@ -112,7 +114,8 @@ import {TableHeaderDemo} from './data-table/table-header-demo';
112114
MdTooltipModule,
113115
MdNativeDateModule,
114116
CdkDataTableModule,
115-
StyleModule
117+
StyleModule,
118+
MdStickyHeaderModule,
116119
]
117120
})
118121
export class DemoMaterialModule {}
@@ -178,6 +181,7 @@ export class DemoMaterialModule {}
178181
PlatformDemo,
179182
TypographyDemo,
180183
ExpansionDemo,
184+
StickyHeaderDemo,
181185
],
182186
providers: [
183187
{provide: OverlayContainer, useClass: FullscreenOverlayContainer},

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,8 @@ export class DemoApp {
6767
{name: 'Tooltip', route: 'tooltip'},
6868
{name: 'Platform', route: 'platform'},
6969
{name: 'Style', route: 'style'},
70-
{name: 'Typography', route: 'typography'}
70+
{name: 'Typography', route: 'typography'},
71+
{name: 'Sticky Header', route: 'sticky-header'},
7172
];
7273

7374
constructor(private _element: ElementRef) {

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ import {DatepickerDemo} from '../datepicker/datepicker-demo';
3636
import {DataTableDemo} from '../data-table/data-table-demo';
3737
import {TypographyDemo} from '../typography/typography-demo';
3838
import {ExpansionDemo} from '../expansion/expansion-demo';
39+
import {StickyHeaderDemo} from '../sticky-header/sticky-header-demo';
40+
3941

4042
export const DEMO_APP_ROUTES: Routes = [
4143
{path: '', component: Home},
@@ -74,4 +76,5 @@ export const DEMO_APP_ROUTES: Routes = [
7476
{path: 'style', component: StyleDemo},
7577
{path: 'typography', component: TypographyDemo},
7678
{path: 'expansion', component: ExpansionDemo},
79+
{path: 'sticky-header', component: StickyHeaderDemo},
7780
];

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

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
2+
<div class="demo-sticky">
3+
<div class="centered" cdk-scrollable>
4+
<h1>Sticky-header Demo</h1>
5+
<div id="testFor" class="container">
6+
7+
<div id="theStickyHeaderLalala" style="margin: 0; border: 0; padding: 0;">
8+
<div cdkSticky parent="false" class="rside1" >
9+
<h2 style = "z-index: 999; color: #ff3d00">Heading 1</h2>
10+
</div>
11+
<P>test sticky-header</P>
12+
<P>test sticky-header</P>
13+
<P>test sticky-header</P>
14+
<P>test sticky-header</P>
15+
<P>test sticky-header</P>
16+
<P>test sticky-header</P>
17+
<P>test sticky-header</P>
18+
<P>test sticky-header</P>
19+
<P>test sticky-header</P>
20+
<P>test sticky-header</P>
21+
<P>test sticky-header</P>
22+
<P>test sticky-header</P>
23+
<P>test sticky-header</P>
24+
<P>test sticky-header</P>
25+
<P>test sticky-header</P>
26+
<P>test sticky-header</P>
27+
<P>test sticky-header</P>
28+
29+
</div>
30+
31+
32+
<div cdkStickyViewport style="margin: 0; border: 0; padding: 0;">
33+
<div cdkSticky style="color:#030" class="rside2">
34+
<h2 style = "z-index: 999; color: blue">Heading 2</h2>
35+
</div>
36+
<P>test sticky-header</P>
37+
<P>test sticky-header</P>
38+
<P>test sticky-header</P>
39+
<P>test sticky-header</P>
40+
<P>test sticky-header</P>
41+
<P>test sticky-header</P>
42+
<P>test sticky-header</P>
43+
<P>test sticky-header</P>
44+
<P>test sticky-header</P>
45+
<P>test sticky-header</P>
46+
<P>test sticky-header</P>
47+
<P>test sticky-header</P>
48+
<P>test sticky-header</P>
49+
<P>test sticky-header</P>
50+
<P>test sticky-header</P>
51+
<P>test sticky-header</P>
52+
<P>test sticky-header</P>
53+
<P>test sticky-header</P>
54+
<P>test sticky-header</P>
55+
<P>test sticky-header</P>
56+
57+
</div>
58+
59+
<div cdkStickyViewport style="margin: 0; border: 0; padding: 0;">
60+
<div cdkSticky class="rside3" >
61+
<h2 style="color: #4a148c">Heading 3</h2>
62+
</div>
63+
<P>test sticky-header</P>
64+
<P>test sticky-header</P>
65+
<P>test sticky-header</P>
66+
<P>test sticky-header</P>
67+
<P>test sticky-header</P>
68+
<P>test sticky-header</P>
69+
<P>test sticky-header</P>
70+
<P>test sticky-header</P>
71+
<P>test sticky-header</P>
72+
<P>test sticky-header</P>
73+
<P>test sticky-header</P>
74+
<P>test sticky-header</P>
75+
<P>test sticky-header</P>
76+
<P>test sticky-header</P>
77+
<P>test sticky-header</P>
78+
<P>test sticky-header</P>
79+
<P>test sticky-header</P>
80+
<P>test sticky-header</P>
81+
<P>test sticky-header</P>
82+
<P>test sticky-header</P>
83+
<P>test sticky-header</P>
84+
<P>test sticky-header</P>
85+
<P>test sticky-header</P>
86+
<P>test sticky-header</P>
87+
<P>test sticky-header</P>
88+
<P>test sticky-header</P>
89+
<P>test sticky-header</P>
90+
<P>test sticky-header</P>
91+
<P>test sticky-header</P>
92+
<P>test sticky-header</P>
93+
<P>test sticky-header</P>
94+
<P>test sticky-header</P>
95+
<P>test sticky-header</P>
96+
<P>test sticky-header</P>
97+
<P>test sticky-header</P>
98+
<P>test sticky-header</P>
99+
<P>test sticky-header</P>
100+
<P>test sticky-header</P>
101+
<P>test sticky-header</P>
102+
103+
</div>
104+
</div>
105+
</div>
106+
107+
</div>

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

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
body {
7+
font: 14px/1.5 Helvetica, Arial, sans-serif;
8+
-webkit-appearance: none;
9+
-moz-appearance: none;
10+
11+
}
12+
13+
14+
15+
16+
.demo-sticky {
17+
.centered {
18+
text-align: center;
19+
-webkit-appearance: none;
20+
-moz-appearance: none;
21+
height: 500px;
22+
overflow: auto;}
23+
24+
button {
25+
position: fixed;
26+
margin: 16px;
27+
z-index: 99;
28+
}
29+
}
30+
.mat-radio-button {
31+
display: block;
32+
}
33+
34+
.centered {
35+
text-align: center;
36+
-webkit-appearance: none;
37+
-moz-appearance: none;
38+
appearance: none;
39+
height: 500px;
40+
//width: 900px;
41+
overflow: auto;}
42+
43+
header {
44+
display: block;
45+
-webkit-appearance: none;
46+
-moz-appearance: none;
47+
width: 100%;
48+
height: 200px;
49+
background: #aaa;
50+
}
51+
52+
.container {
53+
margin: 0;
54+
-webkit-appearance: none;
55+
-moz-appearance: none;
56+
//width: 900px;
57+
}
58+
59+
.content {
60+
float: left;
61+
width: 600px;
62+
padding: 20px;
63+
-webkit-appearance: none;
64+
}
65+
66+
.rside {
67+
//background: #cecece;
68+
background: white;
69+
-webkit-appearance: none;
70+
padding: 20px;
71+
//width: 100%;
72+
}
73+
74+
.rside1 {
75+
background: #cecece;
76+
-webkit-appearance: none;
77+
padding: 20px;
78+
//width: 100%;
79+
}
80+
81+
.rside2 {
82+
background: #cea7a7;
83+
-webkit-appearance: none;
84+
padding: 20px;
85+
//width: 100%;
86+
}
87+
88+
.rside3 {
89+
background: #c2eae5;
90+
-webkit-appearance: none;
91+
padding: 20px;
92+
//width: 100%;
93+
}
94+
95+
96+
h2 {
97+
font-size: 20px;
98+
-webkit-appearance: none;
99+
-moz-appearance: none;
100+
101+
}
102+
103+
p {
104+
margin-bottom: 1.5em;
105+
-webkit-appearance: none;
106+
-moz-appearance: none;
107+
}
108+
109+
div{
110+
-webkit-appearance: none;
111+
-moz-appearance: none;
112+
}

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import {Component} from '@angular/core';
2+
import {NgModule} from '@angular/core';
3+
import {BrowserModule} from '@angular/platform-browser';
4+
import {StickyParentDirective, StickyHeaderDirective} from '@angular/material';
5+
export {StickyParentDirective, StickyHeaderDirective};
6+
7+
8+
9+
@Component({
10+
moduleId: module.id,
11+
selector: 'sticky-header-demo',
12+
templateUrl: 'sticky-header-demo.html',
13+
styleUrls: ['sticky-header-demo.css'],
14+
})
15+
16+
17+
export class StickyHeaderDemo {
18+
constructor() {
19+
}
20+
}

‎src/lib/module.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import {StyleModule} from './core/style/index';
4646
import {MdDatepickerModule} from './datepicker/index';
4747
import {CdkDataTableModule} from './core/data-table/index';
4848
import {MdExpansionModule} from './expansion/index';
49+
import {MdStickyHeaderModule} from './sticky-header/index';
4950

5051
const MATERIAL_MODULES = [
5152
MdAutocompleteModule,
@@ -82,7 +83,8 @@ const MATERIAL_MODULES = [
8283
PlatformModule,
8384
MdCommonModule,
8485
ObserveContentModule,
85-
CdkDataTableModule
86+
CdkDataTableModule,
87+
MdStickyHeaderModule,
8688
];
8789

8890
/** @deprecated */

‎src/lib/public_api.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,3 +42,4 @@ export * from './tabs/index';
4242
export * from './tabs/tab-nav-bar/index';
4343
export * from './toolbar/index';
4444
export * from './tooltip/index';
45+
export * from './sticky-header/index';

‎src/lib/sticky-header/index.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import {NgModule} from '@angular/core';
2+
import {CommonModule} from '@angular/common';
3+
import {OverlayModule, MdCommonModule} from '../core';
4+
import {StickyParentDirective, StickyHeaderDirective} from './sticky-header-dir';
5+
6+
7+
8+
@NgModule({
9+
imports: [OverlayModule, MdCommonModule, CommonModule],
10+
declarations: [StickyParentDirective, StickyHeaderDirective],
11+
exports: [StickyParentDirective, StickyHeaderDirective, MdCommonModule],
12+
})
13+
export class MdStickyHeaderModule {}
14+
15+
16+
export * from './sticky-header-dir';

0 commit comments

Comments
 (0)