Newlyweds Proposing Marriage

    ionic-shrinkage
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1 • Public • Published

    ionic-shrinkage

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

    I was in the pool

    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.

    Install

    npm i ionic-shrinkage

    DownloadsWeekly Downloads

    2

    Version

    0.0.1

    License

    ISC

    Last publish

    Collaborators

    • whatsthatitspat