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.
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.