Make List Items Swipeable In Ionic Framework

It is an expectation of modern mobile applications to have a fancy UI with smooth animations and gesture controls.  Users want to be able to drag things, see smooth transitions, popups and other neat UI wizardry.

A common UI feature, as found in apps like Gmail, are swipe-able list items.  Whether it be swiping to show buttons or swiping to perform tasks, it adds an additional layer of coolness.

Using Ionic Framework on top of Apache Cordova gives us access to swipe-able elements in the ion-list directive.

Let’s go ahead and start by creating a fresh Ionic project:

Remember that if you’re not using a Mac, you cannot add and build for the iOS platform.

 

Ionic Swipe List Item

The end goal is to have something like above where if you swipe a list item left, a series of buttons become exposed.

As per the official Ionic documentation, the buttons are known as ion-option-buttons.  You can add as many ion-option-buttons as you’d like, for example, the following will add three to a list item:

Just add an ng-click to each button to execute a function in your controller.  A full, basic example of the swipe-able list items can be seen here:

It is important to add the can-swipe="true" flag, otherwise the list items will be static and won’t slide.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • CannyCookie

    Hey Nic,
    Thanks for this, any idea how to implement swipe to delete on ionic list items?

    • If you want true swipe actions like Mailbox or Gmail, you’ll have to create your own “ion” because such features are not currently in Ionic Framework. However, if you want to delete items based on the swipe experience I demoed, this is very possible. You might check the following:

      https://www.thepolyglotdeveloper.com/2015/03/create-todo-list-mobile-app-using-ionic-framework/

      You might crack open the Ionic source code and look at how the current swipe list items were done and extend on that since they did a pretty good job laying the ground work.

      Regards,

      • Hi Nic,
        could you please suggest where I can read about how to create custom “ion” to swipe to right to remove the list item? What are your suggestions here?
        Thank you.

        • As of right now I have no suggestions. Ions are a very new topic, and I’m not sure where to direct you on making one or adding swipe features.

          Sorry,

        • Visi Hoxha

          if you’re still interested i suggest you check line 52072 at ionic.bundle.js file. The annotations are very helpful.

  • Hi Nic, I have 2 questions:
    1. Is possible to swipe an item without affect Side Menu?
    2. Can you to trigger a swipe with a hold event?

    Sorry for my bad English and thanks for all! 😀

  • Andrew Saul

    I’ve added the swipe gestures to cards I have in a feed, but now the cards I’ve added the gestures too won’t link to their page. Any ideas how to solve this?

    • The swipe gestures are for ion-list elements, not cards. I encourage you to post your issue in the Ionic forums.

      Regards,

  • Shivam01

    Hi Nic Raboy, I want to make but I am expecting gmail effect like when I slide left it will ask Undo and achieve. so It is possible to make Please let me know.

    Thanks
    Shivam

    • I’m sure it is possible, but you’d have to do some research on how to accomplish. I’ve provided you enough information to put you in the right direction, but I won’t be able to help further than that.

      Regards,

  • no_play

    It didn’t look great because you were missing a > in the option-button-class 😉 ionic is great stuff, thanks for this tutorial

    • Thanks for pointing that out.

      No problem on the tutorial 🙂

  • Manish Sankari

    Please help me, need list view swipe to bookmark and should that bookmark on store in local storage on android.

    • I’m not totally sure what you’re asking. Please try again with detail.

      Best,