Ionic 2 Full Swipe

Note: I will be updating this to RC0 shortly. I do know there is a minor issue with the button’s width not responding to the expanded space.

While working on my upcoming book on the Ionic framework from O’Reilly, I was reading over the blog post about some new additions to the <ion-item-sliding> component supporting a full swipe gesture. I hopped over to the docs to see if they explained how to enable it. Unfortunately, they did not have anything posted yet, so I began to deconstruct it from the code sample. Here is the sample:

<ion-item-sliding>
  <ion-item> Item 1 </ion-item>
  <ion-item-options side="left">
    <button>Mail</button>
  </ion-item-options>
  <ion-item-options side="right" (ionSwipe)="saveItem(item)">
    <button danger>
      Trash
    </button>  
    <button secondary expandable (click)="saveItem(item)">  
       Save
    </button>  
  </ion-item-options> 
</ion-item-sliding>

To support this interaction, two things must be added to our<ion-item-sliding>. First, we need to add the expandable directive to the button.

<button secondary expandable (click)=”saveItem(item)”>

This allows for the visual feedback of the button growing as the user swipes across the item.

swipe_demo

Typically this is attached to the item that is closest to the end of the row. To listen for the swipe gesture, we only need to include an ionSwipe event listener to the <ion-item-options> component. This listener should call the same function as if the user tapped on the item. Here is a simple Plunker showcasing it.

Advertisements

One comment

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s