No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
screenshots
.gitignore
LICENSE
README.md
bower.json
ionic.swoosh.cards.css
ionic.swoosh.cards.js

README.md

Ionic Contrib: Swoosh Cards

This is an extension of ...

...and is reminiscent of the cards found in the National Geographic app. No partial swiping is permitted and cards swoosh away on discard (click).

Demo

Screenshot

Install

  1. Bower install instructions coming.
  2. Include 'ionic.swoosh.cards.js' and 'ionic.swoosh.cards.css' in index.html.

Usage

<div ng-if="cards.active">
  <swoosh-cards spacing="30">
    <swoosh-card ng-repeat="card in cards.active" on-destroy="cardDestroyed($index)">
      <div ng-controller="CardCtrl">
        <div class="top">
          <img ng-src="{{ card.image }}" />
        </div>
        <div class="bottom">
          <h1>{{ card.country }}</h1>
          <p>{{ card.text }}</p>
          <div class="discard" ng-click="discard(card)">DISCARD</div>
        </div>
      </div>
    </swoosh-card>
  </swoosh-cards>
</div>

To add new cards dynamically, just add them to the cards array:

Directive Attributes

Name Scope Options Action
spacing @ Number Number of pixels between each card