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, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

 
Click here if you want to see other tutorials, or articles about the Ionic framework (themes, templates, plugins, 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.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs:






  • Thanks for the credits! 🙂
    See my new directive: http://codepen.io/jdnichollsc/pen/qOrqqK

  • Eyy man, add the following line 🙂
    ionic.Gestures.gestures.Hold.defaults.hold_threshold = 20;

  • Liew Zhi Ying

    Hi, I’m currently using your directive now but I encounter some problems. I would like to use your on-hold only for the list item instead of swiping. I already set the can-swipe =”false”, it works fine until I implement ion-delete-button with show-delete and reorder button. When the button event is trigger, the swiping is auto enable again and I cannot disable it after that.
    Do you have any solution?

    • As I already wrote, this is not my directive. It was written by Ionic forum user jdnichollsc. Please contact him if you require more information.

      • Liew Zhi Ying

        ok, thanks 🙂

  • nuruddin

    thanks for this article is really good job, but i have small question, how i can change direction swapping i need to swap left to right and options appear in left side , how? and thanks a lot.

    • To achieve that you will need to change Ionic CSS, I don’t know if it’s worth your time.

  • Ladna Meke

    Nice job, here and the ionic forum. I copied this directive and added a controller that calls $ionicListDelegate.closeOptionButtons() to close any swiped list before opening another. However, multiple lists remain swiped open at a time