NativeScript GridLayout Swipe

Introduction

The NativeScript GridLayout Swipe component allows you to swipe left or right to reveal hidden content within a GridLayout. It's a great way to improve the functionality and user experience of your app by adding convenient swipe gestures.

Features

• Swipe left or right to reveal hidden content
• Customizable swipe threshold
• Works seamlessly with NativeScript's GridLayout component
• Cross-platform functionality (iOS and Android)

Installation

To install the NativeScript GridLayout Swipe component, use the following command:

tns plugin add nativescript-gridlayout-swipe

Usage

To use the NativeScript GridLayout Swipe component in your app, follow these steps:

1. Import the GridLayoutSwipeModule in your module:

   import { NgModule } from "@angular/core";
   import { GridLayoutSwipeModule } from "nativescript-gridlayout-swipe/angular";
   
   @NgModule({
       imports: [
           GridLayoutSwipeModule
       ]
   })
   export class AppModule { }
   

2. Add the GridLayoutSwipe directive to your GridLayout:

   <GridLayout gridLayoutSwipe (swipeLeft)="onSwipeLeft($event)" (swipeRight)="onSwipeRight($event)">
       <Label text="Hello, world!"></Label>
       <Label swipeItem text="Delete" class="swipe-item"></Label>
   </GridLayout>
   

   The swipeLeft and swipeRight events are emitted when the user swipes left or right, respectively. You can handle these events in your component:

   onSwipeLeft(args) {
       console.log("Swiped left!");
   }
   
   onSwipeRight(args) {
       console.log("Swiped right!");
   }
   

   Note that any child elements with the swipeItem class will be revealed when the user swipes left or right.

3. Add styles to your swipe-item class:

   .swipe-item {
       color: white;
       background-color: red;
       font-size: 16;
       padding: 10;
   }
   

   This will style the hidden swipeItem element that is revealed when the user swipes left or right.

Customization

The NativeScript GridLayout Swipe component allows for customizing the swipe threshold, which is the amount of pixels the user must swipe before the hidden swipeItem element is revealed. To customize the swipe threshold, simply add the swipeThreshold directive to your GridLayout:

<GridLayout gridLayoutSwipe swipeThreshold="50">
    <Label text="Hello, world!"></Label>
    <Label swipeItem text="Delete" class="swipe-item"></Label>
</GridLayout>

In this example, the swipe threshold is set to 50 pixels.

Conclusion

With the NativeScript GridLayout Swipe component, you can easily add swipe gestures to your GridLayouts and improve your app's functionality and user experience. Try it out today!