Skip to content

Commit c103557

Browse files
lohanidamodarlohanidamodar
committed
Beautiful expandable header component
1 parent f9d76ce commit c103557

File tree

7 files changed

+151
-0
lines changed

7 files changed

+151
-0
lines changed

‎src/components/expandable-header/expandable-header.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<ng-content></ng-content>

‎src/components/expandable-header/expandable-header.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
expandable-header {
2+
display: block;
3+
background-color: map-get($colors, primary);
4+
overflow: hidden;
5+
}

‎src/components/expandable-header/expandable-header.ts

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { Component, Input, ElementRef, Renderer } from '@angular/core';
2+
3+
@Component({
4+
selector: 'expandable-header',
5+
templateUrl: 'expandable-header.html',
6+
})
7+
export class ExpandableHeader {
8+
9+
@Input('scrollArea')scrollArea:any;
10+
@Input('headerHeight') headerHeight: number;
11+
newHeaderHeight:any;
12+
13+
constructor(public element: ElementRef, public renderer: Renderer) {
14+
}
15+
ngOnInit(){
16+
this.renderer.setElementStyle(this.element.nativeElement, 'height', this.headerHeight + 'px');
17+
this.scrollArea.ionScroll.subscribe((ev) => {
18+
this.resizeHeader(ev);
19+
});
20+
21+
}
22+
23+
resizeHeader(ev){
24+
25+
ev.domWrite(() => {
26+
27+
this.newHeaderHeight = this.headerHeight - ev.scrollTop;
28+
29+
if(this.newHeaderHeight < 0){
30+
this.newHeaderHeight = 0;
31+
}
32+
33+
this.renderer.setElementStyle(this.element.nativeElement, 'height', this.newHeaderHeight + 'px');
34+
35+
for(let headerElement of this.element.nativeElement.children){
36+
37+
let totalHeight = headerElement.offsetTop + headerElement.clientHeight;
38+
39+
if(totalHeight > this.newHeaderHeight && !headerElement.isHidden){
40+
headerElement.isHidden = true;
41+
this.renderer.setElementStyle(headerElement, 'opacity', '0');
42+
} else if (totalHeight <= this.newHeaderHeight && headerElement.isHidden) {
43+
headerElement.isHidden = false;
44+
this.renderer.setElementStyle(headerElement, 'opacity', '0.7');
45+
}
46+
47+
}
48+
49+
});
50+
51+
}
52+
53+
}

‎src/pages/miscellaneous/expandable-header/expandable-header.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<ion-header>
2+
<expandable-header [scrollArea]="myContent" headerHeight="125">
3+
<ion-item>
4+
<ion-label><ion-icon name="search"></ion-icon></ion-label>
5+
<ion-input type="text"></ion-input>
6+
</ion-item>
7+
8+
<ion-item>
9+
<ion-label><ion-icon name="funnel"></ion-icon></ion-label>
10+
<ion-input type="text"></ion-input>
11+
</ion-item>
12+
</expandable-header>
13+
<ion-navbar color="primary">
14+
<button ion-button menuToggle>
15+
<ion-icon name="menu"></ion-icon>
16+
</button>
17+
<ion-title>Expandable Header</ion-title>
18+
</ion-navbar>
19+
20+
</ion-header>
21+
22+
23+
<ion-content fullscreen #myContent padding>
24+
<header>
25+
<h1>Dummy Title</h1>
26+
</header>
27+
<main>
28+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta dolor urna, quis iaculis eros tincidunt sed.
29+
Nunc tempor porttitor lacus, non ultrices sapien interdum non. Curabitur tempor efficitur tellus, id convallis felis varius eu.
30+
Pellentesque quis velit metus. Nam quis dictum quam. Integer ut mauris augue. Nulla at convallis mauris. Sed vel faucibus odio.
31+
Proin eu ante in massa scelerisque auctor. Nulla at sapien id lectus ultricies dapibus at eu augue. Morbi ac volutpat nulla.
32+
Morbi elit ex, accumsan vitae tincidunt eget, posuere id sem. Sed cursus sem ante, non fringilla augue mattis ac.</p>
33+
<p>Vestibulum finibus mi lacus, eget condimentum diam consequat eu. Donec fermentum accumsan libero, a fermentum ante faucibus vel.
34+
Etiam euismod mi nec efficitur tincidunt. Nulla facilisi. Vivamus nec malesuada turpis. Nulla ultricies non lacus vel scelerisque.
35+
Integer vulputate ex non rutrum scelerisque. Sed ac dapibus risus. Fusce blandit, mauris at semper venenatis, metus ipsum ultricies
36+
lacus, quis suscipit nunc nibh ut tellus. Cras varius quam vel libero scelerisque accumsan. Pellentesque at luctus tortor.
37+
In eleifend neque justo, porttitor auctor augue rhoncus ac.
38+
Mauris ut eros eu sapien aliquet lacinia. Donec fringilla velit diam, eu maximus felis lacinia vel.</p>
39+
<p>Nullam eleifend ut eros sit amet aliquam. In mattis dolor non tortor vulputate, nec eleifend magna lobortis.
40+
Vivamus id ex ultrices, mollis enim a, fringilla risus. Quisque vel aliquet diam. Morbi vitae facilisis elit.
41+
Donec in pretium sapien. Phasellus rhoncus nisi ante, eget tempus nibh pretium non. Aliquam fringilla, odio sit
42+
amet varius commodo, lacus metus volutpat nisi, in faucibus est urna non orci. Suspendisse rhoncus lobortis tortor,
43+
sed placerat metus finibus sodales. Mauris at sapien placerat, efficitur leo at, auctor erat.
44+
In faucibus tellus sit amet leo vehicula, ac ultrices dui auctor. Duis maximus auctor metus a vulputate.</p>
45+
<p>Nullam eleifend ut eros sit amet aliquam. In mattis dolor non tortor vulputate, nec eleifend magna lobortis.
46+
Vivamus id ex ultrices, mollis enim a, fringilla risus. Quisque vel aliquet diam. Morbi vitae facilisis elit.
47+
Donec in pretium sapien. Phasellus rhoncus nisi ante, eget tempus nibh pretium non. Aliquam fringilla, odio sit
48+
amet varius commodo, lacus metus volutpat nisi, in faucibus est urna non orci. Suspendisse rhoncus lobortis tortor,
49+
sed placerat metus finibus sodales. Mauris at sapien placerat, efficitur leo at, auctor erat.
50+
In faucibus tellus sit amet leo vehicula, ac ultrices dui auctor. Duis maximus auctor metus a vulputate.</p>
51+
</main>
52+
</ion-content>

‎src/pages/miscellaneous/expandable-header/expandable-header.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.ios, .md{
2+
page-expandable-header {
3+
ion-item{
4+
width: 92%;
5+
margin: 4%;
6+
padding-left: 10px !important;
7+
margin-bottom: 10px;
8+
background-color: #fff;
9+
opacity: 0.7;
10+
font-size: 0.9em;
11+
transition: 0.2s linear;
12+
}
13+
}
14+
}

‎src/pages/miscellaneous/expandable-header/expandable-header.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Component } from '@angular/core';
2+
import { NavController, NavParams } from 'ionic-angular';
3+
4+
/*
5+
Generated class for the ExpandableHeader page.
6+
7+
See http://ionicframework.com/docs/v2/components/#navigation for more info on
8+
Ionic pages and navigation.
9+
*/
10+
@Component({
11+
selector: 'page-expandable-header',
12+
templateUrl: 'expandable-header.html'
13+
})
14+
export class ExpandableHeaderPage {
15+
16+
constructor(public navCtrl: NavController, public navParams: NavParams) {}
17+
18+
ionViewDidLoad() {
19+
}
20+
21+
}

‎src/pages/miscellaneous/miscellaneous.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { TestimonialsPage } from './testimonials/testimonials';
1313
import { TinderCardsPage } from './tinder-cards/tinder-cards';
1414
import { Component } from '@angular/core';
1515
import { RuntimePermissionsPage } from './runtime-permissions/runtime-permissions';
16+
import { ExpandableHeaderPage } from './expandable-header/expandable-header';
1617

1718
import { NavController, MenuController } from 'ionic-angular';
1819

@@ -74,6 +75,10 @@ export class MiscellaneousListPage {
7475
title: 'Flash Card',
7576
page: FlashCardPage
7677
},
78+
{
79+
title: 'Expandabl Header',
80+
page: ExpandableHeaderPage
81+
},
7782
// {
7883
// title: 'Weather',
7984
// page: WeatherPage

0 commit comments

Comments
 (0)