Icon only list item option-buttons


#1

Anyone know how to do icon only option-buttons for list items?


#2

Hey what do you mean by option-buttons?

To have a list item with only an icon you can do something like:

<li class="item item-icon-left">
  <i class="icon ion-email"></i>
</li>

#3

Option-buttons is an array of objects specifying the hidden buttons show underneath an item when swiped. These items are specified in the controller.

http://ionicframework.com/docs/angularjs/views/list/

This is an example someone made: http://plnkr.co/eUH0V3

If you swipe left it reveals the options, but I can’t seem to figure out how to make the buttons only have icons instead of text.


#4

Sorry misunderstood at first. If you want to have an icon only option button, just delete the text and add an icon class:

$scope.itemButtons = [
    {
      text: '',
      type: 'button-assertive icon ion-alert',
      onTap: function(item) {
        alert('Edit Item: ' + item.id);
      }
    },
    {
      text: '',
      type: 'button-calm icon ion-email',
      onTap: function(item) {
        alert('Share Item: ' + item.id);
      },
      
    }
  ];