Skip to content
A simple swipeable card component implemented in Angular2
TypeScript CSS JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
server
src
.editorconfig
.gitignore
.npmignore
.nvmrc
.travis.yml
CONTRIBUTING.md
LICENSE
README.md
firebase.json
gulpfile.js
package.json
tsconfig.json
typings.json
webpack.config.js

README.md

ng2-swipeable-card

Build Status Dependency Status devDependency Status downloads

All Contributors Angular 2 Style Guide PRs Welcome version MIT License

A small standalone Angular2 plugin that allows your card component to either swipe left or right. To view the live demo, please visit https://ng2-swipeable-card.firebaseapp.com/ (You can also try to open from your mobile device 🎉)!

Installation

npm install --save ng2-swipeable-card

Usage

For webpack consumers, first, import SwipeableCardModule to your entry AppModule file,

  // Root app module file
  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { SwipeableCardModule } from 'ng2-swipeable-card';
  
  import { AppComponent } from './app/';
  
  @NgModule({
    imports: [
      BrowserModule,
      SwipeableCardModule
      ...
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
  });

Then, import ng2-swipeable-card and hammerjs in your vendor.ts file,

  // vendor.ts file
  import '@angular/common';
  import '@angular/core';
  ...
  
  import 'hammerjs';
  import 'ng2-swipeable-card';

Lastly, simply add your content between swipeable-card tags to consume swipeable-card styles like box-shadow and default padding. Example markup for a list of swipeable cards that you can swipe either left or right.

  import { Component, ViewEncapsulation } from '@angular/core';
  
  @Component({
    selector: 'app',
    encapsulation: ViewEncapsulation.None,
    template:`
    <div class="swipeable-card-container">
      <swipeable-card *ngFor="let card of cards; let idx = index;"
                      [cards]="cards"
                      [class.visible]="card.visible"
                      [class.hidden]="!card.visible"
      >
        <img swipeable-card-image src="{{ card.image }}">
        <swipeable-card-content>
          <swipeable-card-title>
            {{ record.name }}
            <small>{{ idx }}</small>
          </swipeable-card-title>
          <p>{{ record.content }}</p>
        </swipeable-card-content>
        
        <swipeable-card-actions>
          <button swipeable-button (click)="like(card)">LIKE</button>
          <button swipeable-button (click)="share(card)">SHARE</button>
        </swipeable-card-actions>
      </swipeable-card>
    </div>
    
    `,
  });
  export class AppComponent {
    // load any number of cards
    cards = [
      { name: 'Helen', image: 'http://semantic-ui.com/images/avatar/large/helen.jpg', visible: true, content: 'Helen: . Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat' },
      { name: 'Elliot', image: 'http://semantic-ui.com/images/avatar/large/elliot.jpg', visible: false, content: 'Elliot: Lorem ipsum dolor sit amet, consectetur 3adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
      { name: 'Matt', image: 'http://semantic-ui.com/images/avatar/large/matt.jpg', visible: false, content: 'Matt: Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' }
    ];
    
    // click `like` action
    like(card): void {}
    
    // click `share` action
    share(card): void {}
  }

Getting Started

Dependencies Prerequisites

Make sure you have Node version >= 5.11 and NPM >= 3

If you have nvm installed, which is highly recommended (brew install nvm) you can do a nvm install --lts && nvm use in $ to run with the latest Node LTS. You can also have this zsh done for you automatically.

Once you have those, you should install these globals with npm install --global:

  • webpack (npm install --global webpack)
  • webpack-dev-server (npm install --global webpack-dev-server)
  • typings (npm install --global typings)

Running Development

Once you have installed all prerequisites,

  • fork this repo
  • clone your fork
  • nvm use use the node version from .nvmrc
  • npm install to install all dependencies
  • npm run typings to install all related typings
  • npm start to run our demo app locally

If you are having issues setting up your local development, try rm -rf node_modules && npm cache clean, and re-run npm install. If issues still persist, please file an issue.

Credits

License

MIT © Jay Kan

You can’t perform that action at this time.