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


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?


When you say option buttons do you mean radio buttons?


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

This is an example someone made:

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.


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;


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.