Skip to content

Sticky header demo code #6033

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

Merged
merged 16 commits into from
Aug 1, 2017
Merged

Sticky header demo code #6033

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
da82a1f
add lib files for sticky-header
sllethe Jun 16, 2017
52c6bce
# This is a combination of 7 commits.
sllethe Jun 21, 2017
96e6d0c
refine code
sllethe Jun 26, 2017
983b0f0
Add demo to sticky-header
sllethe Jul 25, 2017
352f87b
revert
sllethe Jul 25, 2017
a3c1845
deleted HEAD file
sllethe Jul 25, 2017
7945a22
removed unused 'id'
sllethe Jul 25, 2017
da06573
sllethe Jul 25, 2017
e43a250
sllethe Jul 25, 2017
e47492b
sllethe Jul 25, 2017
b9d8523
nit
sllethe Jul 25, 2017
c15c808
sllethe Jul 27, 2017
d329aaa
sllethe Jul 27, 2017
3f88ac9
sllethe Jul 31, 2017
7caff97
fix white space between different <div>s
sllethe Jul 31, 2017
1dc7439
sllethe Jul 31, 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 @@ -76,10 +76,12 @@ import {
MdToolbarModule,
MdTooltipModule,
OverlayContainer,
StyleModule
StyleModule,
StickyHeaderModule
} from '@angular/material';
import {CdkTableModule} from '@angular/cdk';
import {TableHeaderDemo} from './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 @@ -118,7 +120,8 @@ import {TableHeaderDemo} from './table/table-header-demo';
MdTooltipModule,
MdNativeDateModule,
CdkTableModule,
StyleModule
StyleModule,
StickyHeaderModule
]
})
export class DemoMaterialModule {}
Expand Down Expand Up @@ -184,6 +187,7 @@ export class DemoMaterialModule {}
PlatformDemo,
TypographyDemo,
ExpansionDemo,
StickyHeaderDemo
],
providers: [
{provide: OverlayContainer, useClass: FullscreenOverlayContainer},
Expand Down
2 changes: 2 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,7 @@ import {DatepickerDemo} from '../datepicker/datepicker-demo';
import {TableDemo} from '../table/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 +75,5 @@ export const DEMO_APP_ROUTES: Routes = [
{path: 'style', component: StyleDemo},
{path: 'typography', component: TypographyDemo},
{path: 'expansion', component: ExpansionDemo},
{path: 'sticky-header', component: StickyHeaderDemo}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add this to the navItems in demo-app.ts?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Added to navItems in demo-app.ts

];
79 changes: 79 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,79 @@
<div class="demo-sticky">
<div class="centered" cdk-scrollable>
<div>
<h1>Sticky-header Demo</h1>
</div>

<div class="container">

<div>
<div cdkStickyHeader class="header-style header-color3" >
<h2>Unread Messages</h2>
</div>
<P>Min: Branch is this weekend? </P>
<P>Li: Yes</P>
<P>Chan: Looking</P>
<P>Chan: Forward</P>
<P>Chan: To It !</P>
<P>Min: Branch is this weekend?</P>
<P>Li: Yes</P>
<P>Eat: Green Peppers</P>
<P>Chan: Where? </P>
<P>Min: Branch is this weekend?</P>
<P>Li: Yes</P>
<P>Chan: Where?</P>
<P>Eat: Green Peppers</P>
</div>

<div cdkStickyRegion >
<div cdkStickyHeader class="header-style header-color2">
<h2>Late Messages</h2>
</div>
<P>Min: Branch is this weekend? </P>
<P>Li: Yes</P>
<P>Chan: Looking</P>
<P>Chan: Forward</P>
<P>Chan: To It !</P>
<P>Min: Branch is this weekend?</P>
<P>Li: Yes</P>
<P>Eat: Green Peppers</P>
<P>Chan: Where? </P>
<P>Min: Branch is this weekend?</P>
<P>Li: Yes</P>
<P>Chan: Where?</P>
<P>Eat: Green Peppers</P>
<P>Min: Branch is this weekend? </P>
<P>Li: Yes</P>
</div>

<div cdkStickyRegion>
<div cdkStickyHeader class="header-style header-color1" >
<h2>Read Messages</h2>
</div>
<P>Min: Branch is this weekend? </P>
<P>Li: Yes</P>
<P>Chan: Looking</P>
<P>Chan: Forward</P>
<P>Chan: To It !</P>
<P>Min: Branch is this weekend?</P>
<P>Li: Yes</P>
<P>Eat: Green Peppers</P>
<P>Chan: Where? </P>
<P>Min: Branch is this weekend?</P>
<P>Li: Yes</P>
<P>Chan: Where?</P>
<P>Eat: Green Peppers</P>
<P>Min: Branch is this weekend? </P>
<P>Li: Yes</P>
<P>Min: Branch is this weekend? </P>
<P>Li: Yes</P>
<P>Chan: Looking</P>
<P>Chan: Forward</P>
<P>Chan: To It !</P>
<P>Min: Branch is this weekend?</P>
<P>Li: Yes</P>
</div>
</div>
</div>

</div>
88 changes: 88 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,88 @@
.demo-sticky {
.centered {
text-align: left;
-webkit-appearance: none;
-moz-appearance: none;
height: 500px;
overflow: auto;}

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

* {
margin: 0;
padding: 0;
}

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

}

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

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

p {
text-indent: 4em;
margin-bottom: 1.5em;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As discussed, this margin-bottom is what's causing the space between the headers. You can use :not(:last-child) to avoid putting the margin on the last item in the list to prevent it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Cool!
Changed margin to padding in CSS style file to avoid the extra white space between two <div>s

-webkit-appearance: none;
-moz-appearance: none;
}

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

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

.centered {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefix demo classes with demo-

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Added prefix demo- to demo classes

text-align: center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 500px;
overflow: auto;}

.container {
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
}

.header-style{
-webkit-appearance: none;
padding: 20px;
}

.header-color1 {
background: #cecece;
}

.header-color2 {
background: #cea7a7;
}

.header-color3 {
background: #c2eae5;
}
13 changes: 13 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,13 @@
import {Component} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {CdkStickyRegion, CdkStickyHeader} from '@angular/material';


@Component({
moduleId: module.id,
selector: 'sticky-header-demo',
templateUrl: 'sticky-header-demo.html',
styleUrls: ['sticky-header-demo.css'],
})

export class StickyHeaderDemo { }