ionic-shrinkage

ionic-shrinkage is a directive for Ionic 2 to cause headers to shrink & reveal, in parallactic fashion, based on user scrolling.

NOTE: This was built alongside Beta.11 of Ionic, and will be updated to Ionic 2.0 when it’s final (or perhaps the release candidates, but we’ll see).

Installation

npm install ionic-shrinkage --save

Usage Example

home.ts

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';
import { Shrinkage } from 'ionic-shrinkage';
@Component({
  templateUrl: 'build/pages/home/home.html',
  directives: [ Shrinkage ]
})
export class HomePage {
  // We bind content to the shrinkage attribute in the HTML template
  @ViewChild(Content) content: Content;
  // Necessary for the change() method below
  @ViewChild(Shrinkage) shrinkage;
  constructor() {}
  // If you use Structural Directives to add or remove items in the header,
  // you'll have to call resize() on both content and the shrinkage directive.
  change(e) {
    this.content.resize();
    this.shrinkage.resize();
  }
}

home.html

<ion-header [shrinkage]="content">
  <ion-navbar>
    <ion-title>I was in the pool!</ion-title>
  </ion-navbar>
  <!--Structural Directives need to be accounted for with the resize() method --> 
  <ion-toolbar no-border-top *ngIf="showSearch">
    <ion-searchbar></ion-searchbar>
  </ion-toolbar>
</ion-header>
<!--Note the fullscreen attribute-->
<ion-content class="home" fullscreen>
  <!--Enough content to scroll-->
  <ion-item>
    <ion-label>Search</ion-label>
    <!--change() will resize the content and header via the directive-->
    <ion-toggle [(ngModel)]="showSearch" (ionChange)="change()"></ion-toggle>
  </ion-item>
</ion-content>

Requirements & Notes

• WKWebView - With UIWebView, scroll events don’t continue firing after your finger has left the screen, and while scroll momentum is still in effect. This works in WKWebView.
• Crosswalk - I looked at Android without Crosswalk for about 2 minutes and doubt I’ll spent more that that.
• Windows? - I don’t know and haven’t tested it at all.

TODO

1. Resize method.
2. Improve performance or provide fallback animation / cancellation for older devices.
   • Shrinkage works like butter on an iPhone 6s, but is janky on iPhone 5 and Galaxy S3 (with Crosswalk). Though both of those devices are from 2012, and possibly not worth fussing about.
   • Perfomance advice and device testing are welcome.
3. Hide footers & tabs.
4. Consider independently hiding toolbars within a header.

Author

Patrick McDonald (Github / Twitter)

Licence

This project is licensed under the ISC license. See the LICENSE file for more info.