Programmatically Show Ion List Options Buttons in Ionic Framework

Written by on August 25, 2015

Programmatically Show Ion List Options Buttons in Ionic Framework

Ion list options buttons are a 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!

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
Categories

8 thoughts on “Programmatically Show Ion List Options Buttons in Ionic Framework”

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

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

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

Leave a Reply