Skip to content

feat(sticky-header): add app-demo for sticky-header #5176

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 8 commits into from
Closed

feat(sticky-header): add app-demo for sticky-header #5176

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
37a0fb0
add lib files for sticky-header
sllethe Jun 16, 2017
86efb29
add app-demo for sticky-header
sllethe Jun 16, 2017
92a99d0
fix bugs and deleted unused tag id in HTML files
sllethe Jun 16, 2017
c2b3a9f
sllethe Jun 20, 2017
ab4fd94
sllethe Jun 21, 2017
2300e37
sllethe Jul 24, 2017
2956a9f
sllethe Jul 24, 2017
e409ca7
sllethe Jul 24, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions src/demo-app/demo-app-module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,11 @@ import {
MdToolbarModule,
MdTooltipModule,
OverlayContainer,
StyleModule
StyleModule,
MdStickyHeaderModule,
} from '@angular/material';
import {TableHeaderDemo} from './data-table/table-header-demo';
import {StickyHeaderDemo} from './sticky-header/sticky-header-demo';

/**
* NgModule that includes all Material modules that are required to serve the demo-app.
Expand Down Expand Up @@ -112,7 +114,8 @@ import {TableHeaderDemo} from './data-table/table-header-demo';
MdTooltipModule,
MdNativeDateModule,
CdkDataTableModule,
StyleModule
StyleModule,
MdStickyHeaderModule,
]
})
export class DemoMaterialModule {}
Expand Down Expand Up @@ -178,6 +181,7 @@ export class DemoMaterialModule {}
PlatformDemo,
TypographyDemo,
ExpansionDemo,
StickyHeaderDemo,
],
providers: [
{provide: OverlayContainer, useClass: FullscreenOverlayContainer},
Expand Down
3 changes: 2 additions & 1 deletion src/demo-app/demo-app/demo-app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,8 @@ export class DemoApp {
{name: 'Tooltip', route: 'tooltip'},
{name: 'Platform', route: 'platform'},
{name: 'Style', route: 'style'},
{name: 'Typography', route: 'typography'}
{name: 'Typography', route: 'typography'},
{name: 'Sticky Header', route: 'sticky-header'},
];

constructor(private _element: ElementRef) {
Expand Down
3 changes: 3 additions & 0 deletions src/demo-app/demo-app/routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@ import {DatepickerDemo} from '../datepicker/datepicker-demo';
import {DataTableDemo} from '../data-table/data-table-demo';
import {TypographyDemo} from '../typography/typography-demo';
import {ExpansionDemo} from '../expansion/expansion-demo';
import {StickyHeaderDemo} from '../sticky-header/sticky-header-demo';


export const DEMO_APP_ROUTES: Routes = [
{path: '', component: Home},
Expand Down Expand Up @@ -74,4 +76,5 @@ export const DEMO_APP_ROUTES: Routes = [
{path: 'style', component: StyleDemo},
{path: 'typography', component: TypographyDemo},
{path: 'expansion', component: ExpansionDemo},
{path: 'sticky-header', component: StickyHeaderDemo},
];
107 changes: 107 additions & 0 deletions src/demo-app/sticky-header/sticky-header-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@

<div class="demo-sticky">
<div class="centered" cdk-scrollable>
<div>
<h1>Sticky-header Demo</h1>
</div>

<div id="testFor" class="container">

<div>
<div cdkStickyHeader class="rside1" >
<h2>Heading 1</h2>
</div>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
</div>


<div cdkStickyRegion >
<div cdkStickyHeader class="rside2">
<h2>Heading 2</h2>
</div>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
</div>

<div cdkStickyRegion>
<div cdkStickyHeader class="rside3" >
<h2>Heading 3</h2>
</div>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
<P>test sticky-header</P>
</div>
</div>
</div>

</div>
112 changes: 112 additions & 0 deletions src/demo-app/sticky-header/sticky-header-demo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@


.demo-sticky {
.centered {
text-align: center;
-webkit-appearance: none;
-moz-appearance: none;
height: 500px;
overflow: auto;}

button {
position: fixed;
margin: 16px;
z-index: 99;
}

h2 {
font-size: 20px;
padding: 20px;
-webkit-appearance: none;
-moz-appearance: none;
}

p {
margin-bottom: 1.5em;
-webkit-appearance: none;
-moz-appearance: none;
}

div{
margin: 0; border: 0; padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
}

* {
margin: 0;
padding: 0;
}

body {
font: 14px/1.5 Helvetica, Arial, sans-serif;
-webkit-appearance: none;
-moz-appearance: none;

}
}

.mat-radio-button {
display: block;
}

.centered {
text-align: center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 500px;
//width: 900px;
overflow: auto;}

header {
display: block;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
height: 200px;
background: #aaa;
}

.container {
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
//width: 900px;
}

.content {
float: left;
width: 600px;
padding: 20px;
-webkit-appearance: none;
}

.rside {
//background: #cecece;
background: white;
-webkit-appearance: none;
padding: 20px;
//width: 100%;
}

.rside1 {
background: #cecece;
-webkit-appearance: none;
padding: 20px;
//width: 100%;
}

.rside2 {
background: #cea7a7;
-webkit-appearance: none;
padding: 20px;
//width: 100%;
}

.rside3 {
background: #c2eae5;
-webkit-appearance: none;
padding: 20px;
//width: 100%;
}
9 changes: 9 additions & 0 deletions src/demo-app/sticky-header/sticky-header-demo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import {Component} from '@angular/core';

@Component({
moduleId: module.id,
selector: 'sticky-header-demo',
templateUrl: 'sticky-header-demo.html',
styleUrls: ['sticky-header-demo.css'],
})
export class StickyHeaderDemo { }
4 changes: 3 additions & 1 deletion src/lib/module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ import {StyleModule} from './core/style/index';
import {MdDatepickerModule} from './datepicker/index';
import {CdkDataTableModule} from './core/data-table/index';
import {MdExpansionModule} from './expansion/index';
import {MdStickyHeaderModule} from './sticky-header/index';

const MATERIAL_MODULES = [
MdAutocompleteModule,
Expand Down Expand Up @@ -82,7 +83,8 @@ const MATERIAL_MODULES = [
PlatformModule,
MdCommonModule,
ObserveContentModule,
CdkDataTableModule
CdkDataTableModule,
MdStickyHeaderModule,
];

/** @deprecated */
Expand Down
1 change: 1 addition & 0 deletions src/lib/public_api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,3 +42,4 @@ export * from './tabs/index';
export * from './tabs/tab-nav-bar/index';
export * from './toolbar/index';
export * from './tooltip/index';
export * from './sticky-header/index';
16 changes: 16 additions & 0 deletions src/lib/sticky-header/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {OverlayModule, MdCommonModule} from '../core';
import {StickyParentDirective, StickyHeaderDirective} from './sticky-header-dir';



@NgModule({
imports: [OverlayModule, MdCommonModule, CommonModule],
declarations: [StickyParentDirective, StickyHeaderDirective],
exports: [StickyParentDirective, StickyHeaderDirective, MdCommonModule],
})
export class MdStickyHeaderModule {}


export * from './sticky-header-dir';
Loading