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:

ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios

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:

<ion-item href="#">
    Item 1
    <ion-option-button class="button-light icon ion-heart"></ion-option-button>
    <ion-option-button class="button-light icon ion-email"></ion-option-button>
    <ion-option-button class="button-assertive icon ion-trash-a"></ion-option-button>
</ion-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:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">
        <ion-pane>
            <ion-header-bar class="bar-stable">
                <h1 class="title">Ionic Blank Starter</h1>
            </ion-header-bar>
            <ion-content>
                <ion-list show-delete="false" can-swipe="true">
                    <ion-item href="#">
                        Item 1
                        <ion-option-button class="button-light icon ion-heart"></ion-option-button>
                        <ion-option-button class="button-light icon ion-email"></ion-option-button>
                        <ion-option-button class="button-assertive icon ion-trash-a"></ion-option-button>
                    </ion-item>
                    <ion-item href="#">
                        Item 2
                        <ion-option-button class="button-light icon ion-heart"></ion-option-button>
                        <ion-option-button class="button-light icon ion-email"></ion-option-button>
                        <ion-option-button class="button-assertive icon ion-trash-a"></ion-option-button>
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-pane>
    </body>
</html>

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

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.

Search

Follow Us

Subscribe

Subscribe to my newsletter for monthly tips and tricks on subjects such as mobile, web, and game development.

Subscribe on YouTube

Support This Site