Ionic 2.x/3.x - Ionic Shrinking Header

Ionic 2.x/3.x - Ionic Shrinking Header

Automatically hide and show the header bar based on the scroll direction.

$10.00

Not yet rated
Iclic Labs

Iclic Labs

Member since 2014

Details

Version:
1.1
Size:
0mb
Ionic:
2.x,3.x
Platforms:
iOS, Android, Windows Phone
View ID:
73be3cec
Released:
3 years ago
Updated:
3 years ago
Category:
Plugins
Tags:
header, shrink, hide, design, iclic labs, iclic, ionic2, ionic3

Thanks to all of you who have downloaded this plugin! Please consider leaving a rating and review, it would be really helpful to get your feedbacks. Thanks.


Plugin by icliclabs.com

This plugin is compatible with Ionic v2.x and v3.x!

Description

Automatically hide and show the header bar based on the scroll direction. This plugin works on iOS, Android and Windows Phone. This very easy to use directive is useful to increase the visible content of your application.

Test Before You Buy

You can test the app using Ionic View and enter the app id 73be3cec.

Features

  1. Works with iOS, Android and Windows Phone.
  2. Only 1 line to add to your template
  3. Comes with a full and detailed example.
  4. This component has well structured html, css and js files and is heavily commented, so that it is easy to edit, add your style, etc.

Installation

  1. Copy the app/components/ion-shrinking-header.ts file into your app directory
  2. Import the IonShrinkingHeader directive and add it to the declarations list in the app/app.module.ts file

That's all!

Usage

  1. in your page template, add [ion-shrinking-header]="content" on your ion-header, the parameter content is a mandatory reference to the Content.

That's all. Here is an example of a Page template, very simple. Just add the ion-shrinking-header directive:

<!-- simply add [ion-shrinking-header]="content" to your ion-header element, that's all! -->
<ion-header [ion-shrinking-header]="content">

  <!-- the content of the header bar is up to you! -->
  <ion-navbar color="fb">
    <ion-title>
      Ionic Shrinking Header
    </ion-title>
    <ion-buttons end>
      <button ion-button><ion-icon name="search"></ion-icon></button>
      <button ion-button><ion-icon name="md-more"></ion-icon></button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>
  <!-- the rest of the content is up to you! -->
</ion-content>

Here is how to retrieve Content in your component:

import { Component, ViewChild } from '@angular/core';
import { NavController, Content } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  // this how you retrieve the Content
  // do not forget to import ViewChild and Content
  @ViewChild(Content) content: Content;

  // the rest of the component is up to you...
  constructor(public navCtrl: NavController) {}
}

Other Popular Plugins:

  1. Ionic Categories: Ionic v2.x/v3.x
  2. Ionic Passcode Square: Ionic v2.x/v3.x
  3. Ionic Passcode Flat: Ionic v2.x/v3.x
  4. Ionic Passcode Round: Ionic v2.x/v3.x
  5. Ionic Shrinking Header: Ionic v2.x/v3.x
  6. Ionic Material Sidemenu: Ionic v2.x/v3.x
  7. Ionic Walkthrough: Ionic v2.x/v3.x
  8. Ionic Contacts Inviter: Ionic v2.x/v3.x
  9. Ionic Cover Header: Ionic v1.x - Ionic v2.x/v3.x
  10. Ionic Profile Header: Ionic v2.x/v3.x
  11. Ionic Numeric Keyboard: Ionic v1.x - Ionic v2.x/v3.x
  12. Ionic Phone Number Validator: Ionic v1.x
  13. Ionic Cover Item: Ionic v1.x
  14. Ionic Timer: Ionic v1.x

Need Custom Work?

If you need help with your Ionic apps, if you need a specific plugin or integration. Let's get in touch. I'll be glad to develop or advise you for your app! Email me at icl1clabs@gmail.com.

Hey there! You'll need to log in before you can leave a comment here.

Kevin Püchl

Kevin Püchl   ·   3 years ago

There is an error in your extension ;-) "Property height() does not exist on type content." Use "contentHeight" instead of "height()" on line 58 and 59.

Iclic Labs

Iclic Labs   ·   3 years ago

Hey Kevin, can you email me at icl1clabs@gmail.com with more information please? (Ionic version, etc) thanks

Iclic Labs

Iclic Labs   ·   3 years ago

Thanks Kevin for the follow up, it was a small breaking change between RC4 and RC5. I updated and published a new version for the RC5.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

carlos martin

carlos martin   ·   3 years ago

I want to buy this plugin, but...Does it work in version 2.0.0 Final?

Iclic Labs

Iclic Labs   ·   3 years ago

Hey Carlos, Yes all plugins are compatible with ionic v2.0.0.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Jayser Mendez

Jayser Mendez   ·   3 years ago

Does not work.... Implemented on last version of Ionic 2. No errors, nothing...

Iclic Labs

Iclic Labs   ·   3 years ago

Hey @JayserMendez, all plugins are working perfectly. Email at icl1clabs@gmail.com so we can figure out your problem. Cheers.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Neo Nguyen

Neo Nguyen   ·   3 years ago

I bought it and it did not work on Ionic 2.1

Iclic Labs

Iclic Labs   ·   3 years ago

Hello Neo, are you using ion-scroll? (I had a report that the plugin was not compatible with ion-scroll). If not, email me at icl1clabs@gmail.com to figure this out.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

yanuar abednego

yanuar abednego   ·   3 years ago

hello, is it working smoothly on ionic 2.3.0 ?

Iclic Labs

Iclic Labs   ·   3 years ago

Hey @yanuarabednego, it is supposed to. If you have any issues, you can hit me up by email and can refund you if we don't figure this out. Also I am going to update the plugins to ionic 3.0.0 soon since it is stable now.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

nyle m

nyle m   ·   3 years ago

Hello, I bought this plugin, but how can i have ion-toolbar get the same effect so like <ion-toolbar will have a search-bar in it i want it to have that effect only not the whole header.

Iclic Labs

Iclic Labs   ·   3 years ago

Hello @nylem I followed up by email.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

aalo

aalo   ·   3 years ago

would it work on a tabs page? so the tabs slide up and title bar hides away?

Iclic Labs

Iclic Labs   ·   3 years ago

hey @aalo, no, it won't work without an ion-navbar element. You can still get the plugin and modify this part of the component, it should not be too complicated. For more questions, you should email me at icl1clabs@gmail.com. Cheers.

Alpamys

Alpamys   ·   2 years ago

yes, I made this. It is easy.

Neel j

Neel j   ·   2 years ago

Can you share the changes you made?

Alpamys

Alpamys   ·   2 years ago

@AhsenM depends on @IclicLabs politics, if they allow I email you component with changes.

Neel j

Neel j   ·   2 years ago

@Alpamys can you please send me changes? can u put it on github?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Alpamys

Alpamys   ·   2 years ago

I bought it today an hour ago. When I reach the end of page and continue scrolling anyway(my phone is iPhone 5s) header hides and shows repeatedly in a crazy way for a while until page takes its normal size without my phone special effect of pulling on end.

Phil Lindsay

Phil Lindsay   ·   2 years ago

I noticed this too - had to remove it as it didn't look good for the user.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Alpamys

Alpamys   ·   2 years ago

I also tested this issue on your demo(73be3cec), actually the same, header goes crazy on pulling at the end of page.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Alpamys

Alpamys   ·   2 years ago

Content height is not increases on dynamic content. Why?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Nikola

Nikola   ·   2 years ago

I have one question, how hard, and is it possible to make it shrinks while you touch and drag over it. At the moment it works while you scroll over the page ( ion-content ), but I want to use it in a page, which will have a big header ( almost half of page ) and be able to trigger it , when you drag and scroll over it, not just outside it. I hope you understand me, thank you alot.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Nikola

Nikola   ·   2 years ago

I have one question, how hard, and is it possible to make it shrinks while you touch and drag over it. At the moment it works while you scroll over the page ( ion-content ), but I want to use it in a page, which will have a big header ( almost half of page ) and be able to trigger it , when you drag and scroll over it, not just outside it. I hope you understand me, thank you alot.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Alpamys

Alpamys   ·   2 years ago

Content height is not increases on dynamic content. Why?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Alpamys

Alpamys   ·   2 years ago

I also tested this issue on your demo(73be3cec), actually the same, header goes crazy on pulling at the end of page.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Alpamys

Alpamys   ·   2 years ago

I bought it today an hour ago. When I reach the end of page and continue scrolling anyway(my phone is iPhone 5s) header hides and shows repeatedly in a crazy way for a while until page takes its normal size without my phone special effect of pulling on end.

Phil Lindsay

Phil Lindsay   ·   2 years ago

I noticed this too - had to remove it as it didn't look good for the user.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

aalo

aalo   ·   3 years ago

would it work on a tabs page? so the tabs slide up and title bar hides away?

Iclic Labs

Iclic Labs   ·   3 years ago

hey @aalo, no, it won't work without an ion-navbar element. You can still get the plugin and modify this part of the component, it should not be too complicated. For more questions, you should email me at icl1clabs@gmail.com. Cheers.

Alpamys

Alpamys   ·   2 years ago

yes, I made this. It is easy.

Neel j

Neel j   ·   2 years ago

Can you share the changes you made?

Alpamys

Alpamys   ·   2 years ago

@AhsenM depends on @IclicLabs politics, if they allow I email you component with changes.

Neel j

Neel j   ·   2 years ago

@Alpamys can you please send me changes? can u put it on github?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

carlos martin

carlos martin   ·   3 years ago

I want to buy this plugin, but...Does it work in version 2.0.0 Final?

Iclic Labs

Iclic Labs   ·   3 years ago

Hey Carlos, Yes all plugins are compatible with ionic v2.0.0.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

yanuar abednego

yanuar abednego   ·   3 years ago

hello, is it working smoothly on ionic 2.3.0 ?

Iclic Labs

Iclic Labs   ·   3 years ago

Hey @yanuarabednego, it is supposed to. If you have any issues, you can hit me up by email and can refund you if we don't figure this out. Also I am going to update the plugins to ionic 3.0.0 soon since it is stable now.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Neo Nguyen

Neo Nguyen   ·   3 years ago

I bought it and it did not work on Ionic 2.1

Iclic Labs

Iclic Labs   ·   3 years ago

Hello Neo, are you using ion-scroll? (I had a report that the plugin was not compatible with ion-scroll). If not, email me at icl1clabs@gmail.com to figure this out.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Jayser Mendez

Jayser Mendez   ·   3 years ago

Does not work.... Implemented on last version of Ionic 2. No errors, nothing...

Iclic Labs

Iclic Labs   ·   3 years ago

Hey @JayserMendez, all plugins are working perfectly. Email at icl1clabs@gmail.com so we can figure out your problem. Cheers.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Kevin Püchl

Kevin Püchl   ·   3 years ago

There is an error in your extension ;-) "Property height() does not exist on type content." Use "contentHeight" instead of "height()" on line 58 and 59.

Iclic Labs

Iclic Labs   ·   3 years ago

Hey Kevin, can you email me at icl1clabs@gmail.com with more information please? (Ionic version, etc) thanks

Iclic Labs

Iclic Labs   ·   3 years ago

Thanks Kevin for the follow up, it was a small breaking change between RC4 and RC5. I updated and published a new version for the RC5.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

nyle m

nyle m   ·   3 years ago

Hello, I bought this plugin, but how can i have ion-toolbar get the same effect so like <ion-toolbar will have a search-bar in it i want it to have that effect only not the whole header.

Iclic Labs

Iclic Labs   ·   3 years ago

Hello @nylem I followed up by email.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Hey there! You'll need to log in and purchase the add-on before you can leave a rating here.

There are no ratings for this plugin yet

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}