ng2-swipeable-card

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

Angular2 Material Card Component

jaykan / ng2-swipeable-card Goto Github PK