npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nativescript-card-stack-view

v0.0.6

Published

Card stack view component for NativeScript (iOS & Android).

Downloads

12

Readme

NativeScript Card Stack View

A Tinder like card stack view component for NativeScript for iOS and Android with support for Angular.

| Platform | Supported | NativeView | | -------- | :-------: | :-----------------------------------------------------------------------------------: | | iOS | Yes | MDCSwipeToChoose | | Android | Yes | CardStackView |

Demo screen capture

| iOS | Android | | ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------- | | iOS | Android |

Warning

This plugin is a work in progress. All key features should work but please test thoroughly before deploying to production and report any issues.

The angular demo is properly setup. The core should work but the demo is very basic.

Installation

Run tns plugin add nativescript-card-stack-view in the ROOT directory of your project. You must clean your project after adding a plugin with native dependencies. This can be done by executing tns platform remove android (or ios) and then tns platform add android (or ios). The newer versions of the NS CLI, provide a clean command that does this in one script if you like that option as well.

Usage

For any implementation make sure you use ObservableArray<Observable> for the items. You can push to the array and have the cards appear as they are added but any other array manipulations could result in issues. If you a have a specific case in mind write an issue.

Core

Make sure you include the namespace on the Page element:

xmlns:ns="nativescript-card-stack-view"
<ns:CardStack id="cardStack" height="100%" width="100%" color="white" dragging="onDrag" swiped="onSwiped" items="{{ myDataArray }}">
    <ns:CardStack.itemTemplate>
        <ns:CardStackItem backgroundColor="#ff0000" verticalAlignment="middle" margin="15" borderRadius="6">
            <GridLayout>
                <Image src="{{image}}" stretch="aspectFill" height="100%" width="100%"  borderRadius="6"/>
                <Label text="{{title}}" horizontalAlignment="center" backgroundColor="#50000000" height="30" />
                <Label text="WOW" horizontalAlignment="center" backgroundColor="#50000000" height="30" marginTop="50" />
            </GridLayout>
        </ns:CardStackItem>
    </ns:CardStack.itemTemplate>

</ns:CardStack>

Angular

Import the module:

@NgModule({
  bootstrap: [AppComponent],
  imports: [
    ...,
    CardStackModule // Import the module!
  ],
  declarations: [AppComponent],
  ...
})

Create the layout:

<CardStack #cardStack
           [items]="items"
           (swiped)="onSwiped($event)"
           (dragging)="onDrag($event)"
           (canceled)="onDragCancel($event)"
           (loaded)="onStackLoaded($event)"
           [options]="cardStackOptions">

  <ng-template let-i="index" let-item="item">
    <!-- Your template here -->
  </ng-template>
</CardStack>

Events

| Event | Description | | --- | --- | | swiped | Fires when the cards is swiped and returns direction and position | SwipedEvent | | dragging | Fires when dragging occurs | DragEvent | | canceled | Fires when card swiping canceled and returns position of the card in the array | number | | loaded | Fires when the CardStack is loaded ant returns the instance | CardStack |

Properties

| Name | Description | | --- | --- | | selectedIndex | Current front card index |

DragEvent event.object:

{
  side :string; // `"Left"`,`"Right"` 
  ratio: number; // 0-1 ratio of center to right or left edge  
}

SwipedEvent event.object:

{
  direction :string; // `"Left"`,`"Right"` 
  position: number; // index of the swiped card
}

Attributes - Common

  • items (must be used with itemTemplate or ng-template, see demo)

  • options optional

{
  visibleCount: number; // how many cards should be visible in the stack
}

Assign a data-array to generate the slides and apply the bindingContext. If items is populated then you must use the template-option.

Changelog

0.0.2

  • Added LICENSE

0.0.1

  • Initial release

Author

Resources

Used the nativescript-carousel plugin as a scaffold.

Learned from:

Help

I will accept pull requests that improve this and assign credit.