ionic-shrinkage
ionic-shrinkage is a directive for Ionic 2 to cause headers to shrink & reveal, in parallactic fashion, based on user scrolling.
Installation
npm install ionic-shrinkage --save
Usage Example
home.ts
;;;
home.html
I was in the pool! <!--Structural Directives need to be accounted for with the resize() method --> <!--Note the fullscreen attribute--> <!--Enough content to scroll--> Search <!--change() will resize the content and header via the directive-->
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
Resize method.- 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.
- Hide footers & tabs.
- 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.