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.