Make list items have arrow and be clickable with option-buttons

ionic-v1
1

I’m trying to use a list with items and option-buttons, but I need each list item to be clickable and have the arrow while still being able to swipe and show the options. Anyone know if there is a good way to do this?

2

When you say option buttons do you mean radio buttons?

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

Swiping left shows the buttons, but if you add a click event to the list, swiping triggers the click event too. I also don’t know how to have the list arrow show up.

1 Like
4

Ah, sorry for the confusion. Are you just having the click issue in the browser or on devices as well?

Not sure if there is a way to get the arrow for the item directive right now, but you could easily get it by copying the CSS used for anchor and button tags:

a.item-content:after {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  position: absolute;
  top: 0;
  right: 11px;
  height: 100%;
  color: #ccc;
  content: "\f125";
  text-transform: none;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  font-size: 16px;
  font-family: 'Ionicons';
  line-height: 1;
  speak: none;
}
1 Like
5

I haven’t had a chance to test the on my device for the clicking yet. I’ll check that shortly. I may just need to write a custom version of the option-buttons anyway since the list items in my app need to be transparent and you can see the option-buttons behind them. If I have the list item’s overflow hidden and have the options off to the right of the button I should be able to just have them slide in as you swipe somehow.