Skip to content

Commit f9b5f28

Browse files
sllethesllethe
committed
Add demo to sticky-header
1 parent 8230411 commit f9b5f28

File tree

5 files changed

+209
-2
lines changed

5 files changed

+209
-2
lines changed

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,10 +76,12 @@ import {
7676
MdToolbarModule,
7777
MdTooltipModule,
7878
OverlayContainer,
79-
StyleModule
79+
StyleModule,
80+
StickyHeaderModule
8081
} from '@angular/material';
8182
import {CdkTableModule} from '@angular/cdk';
8283
import {TableHeaderDemo} from './table/table-header-demo';
84+
import {StickyHeaderDemo} from './sticky-header/sticky-header-demo';
8385

8486
/**
8587
* NgModule that includes all Material modules that are required to serve the demo-app.
@@ -118,7 +120,8 @@ import {TableHeaderDemo} from './table/table-header-demo';
118120
MdTooltipModule,
119121
MdNativeDateModule,
120122
CdkTableModule,
121-
StyleModule
123+
StyleModule,
124+
StickyHeaderModule
122125
]
123126
})
124127
export class DemoMaterialModule {}
@@ -184,6 +187,7 @@ export class DemoMaterialModule {}
184187
PlatformDemo,
185188
TypographyDemo,
186189
ExpansionDemo,
190+
StickyHeaderDemo
187191
],
188192
providers: [
189193
{provide: OverlayContainer, useClass: FullscreenOverlayContainer},

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import {DatepickerDemo} from '../datepicker/datepicker-demo';
3636
import {TableDemo} from '../table/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';
3940

4041
export const DEMO_APP_ROUTES: Routes = [
4142
{path: '', component: Home},
@@ -74,4 +75,5 @@ export const DEMO_APP_ROUTES: Routes = [
7475
{path: 'style', component: StyleDemo},
7576
{path: 'typography', component: TypographyDemo},
7677
{path: 'expansion', component: ExpansionDemo},
78+
{path: 'sticky-header', component: StickyHeaderDemo}
7779
];

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

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<div class="demo-sticky">
2+
<div class="centered" cdk-scrollable>
3+
<div>
4+
<h1>Sticky-header Demo</h1>
5+
</div>
6+
7+
<div id="testFor" class="container">
8+
9+
<div>
10+
<div cdkStickyHeader class="rside1" >
11+
<h2>Heading 1</h2>
12+
</div>
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+
</div>
27+
28+
29+
<div cdkStickyRegion >
30+
<div cdkStickyHeader class="rside2">
31+
<h2>Heading 2</h2>
32+
</div>
33+
<P>test sticky-header</P>
34+
<P>test sticky-header</P>
35+
<P>test sticky-header</P>
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+
</div>
52+
53+
<div cdkStickyRegion>
54+
<div cdkStickyHeader class="rside3" >
55+
<h2>Heading 3</h2>
56+
</div>
57+
<P>test sticky-header</P>
58+
<P>test sticky-header</P>
59+
<P>test sticky-header</P>
60+
<P>test sticky-header</P>
61+
<P>test sticky-header</P>
62+
<P>test sticky-header</P>
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+
</div>
97+
</div>
98+
</div>
99+
100+
</div>

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

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

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

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

0 commit comments

Comments
 (0)