A fork of swing.js and angular2-swing for Ionic without external hammerjs dependencies
Clone or download
Latest commit 9051965 Nov 17, 2018

README.md

ionic-swing

ionic-swing is a fork of the following projects intended to add the swipeable cards capatibilies to Ionic (>= 2)

Installation

To install this library, run:

$ npm install ionic-swing --save

Usage

1. Import the IonicSwingModule

In your app.module.ts, import the library like following:

import {IonicSwingModule} from 'ionic-swing';

and add it to your imports:

imports: [
    ...
    IonicSwingModule
    ...
]

2. To implement a card stack

To implement a card stack, follow the example provided by angular2-swing

See https://github.com/ksachdeva/angular2-swing

3. ViewChild and ViewChildren in Ionic v4

In Ionic v4, in order to access the stack and cards as ViewChild and ViewChildren, it's mandatory to use the keyword read to identify correctly the elements

Html:

<div swingStack #swingStack>
     <ion-card swingCard #swingCards>
     </ion-card>
</div>

Ts:

@ViewChild('swingStack', {read: SwingStackDirective}) swingStack: SwingStackDirective;
@ViewChildren('swingCards', {read: SwingCardDirective}) swingCards: QueryList<SwingCardDirective>;

Notes regarding hammerjs

This library need hammerjs but isn't shipped with it because some framework, like Ionic v3, already include it in their own resources. If it isn't your case, you would need to install hammerjs in your project

$ npm install hammerjs --save

and add the following line to your app.component.ts

import 'hammerjs';

Development

To generate the library using ng-packagr (https://github.com/dherges/ng-packagr)

$ npm run packagr

To test locally

$ cd dist
$ npm pack
$ cd /your-project-path/
$ npm install /relative-path-to-local-ionic-swing/dist/ionic-swing-0.0.0.tgz

License

MIT © David Dal Busco