Ion list options buttons are nice feature taken from the iOS environment. It’s an ingenious solution if you want to show additional list buttons without taking additional space.
 
 

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!
 

Table of Contents

 
Click here if you want to see other tutorials, or articles about the Ionic framework (themes, templates, plugins, tutorials)

Tutorials

Other Resources (themes, templates, plugins, Cordova plugins, starter apps)

Cordova Plugin Tutorials

 

Implementation

When working with Ionic lists you can easily trigger this feature using a simple swipe left gesture. Unfortunately, there isn’t any other way of achieving this effect, at lease not officially.
 
Some time ago, Ionic forum user jdnichollsc made this nice directive:
 
app.directive('holdList', ['$ionicGesture', function($ionicGesture) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      $ionicGesture.on('hold', function(e) {

        var content = element[0].querySelector('.item-content');

        var buttons = element[0].querySelector('.item-options');
        var buttonsWidth = buttons.offsetWidth;

        ionic.requestAnimationFrame(function() {
          content.style[ionic.CSS.TRANSITION] = 'all ease-out .25s';

          if (!buttons.classList.contains('invisible')) {
            content.style[ionic.CSS.TRANSFORM] = '';
            setTimeout(function() {
              buttons.classList.add('invisible');
            }, 250);
          } else {
            buttons.classList.remove('invisible');
            content.style[ionic.CSS.TRANSFORM] = 'translate3d(-' + buttonsWidth + 'px, 0, 0)';
          }
        });

      }, element);
    }
  };
}]);
 
If you add it to an ion item element like this:
 
<ion-item item="group" collection-repeat="movie in movies" collection-item-width="'100%'" collection-item-height="100" href="#/movie/{{movie.id}}" class="item-thumbnail-left" hold-list>
 
You will be able to show options buttons on touch hold event.
 
Hold event can be easily replaced in this custom directive line:
 
$ionicGesture.on('hold', function(e) {
 
Just replace it with, let’s say touch:
 
$ionicGesture.on('touch', function(e) {
 
Working example can be found here:
 
Working Example
 
 

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.