3. How can I invert the colors of an ons-list-item when it's tapped on?

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

How can I invert the colors of an ons-list-item when it's tapped on?

  • A

    Is there a way to invert the colors of an ons-list-item when tapped on, e.g. when the tap starts (i.e. when user starts touching the screen) and revert back to normal colours when the tap ends (i.e. user lifts their finger from the screen)?

    Code is pretty standard:

    <ons-list-item tappable>
     <div class="left">
	   <img class="list-item__thumbnail" src="img/MyIcon.png">
     </div>
     <div class="center">
          Some text
     </div>
     <div class="right">
	<i class="fa-solid fa-circle" style="color: blue"></i>
     </div>
</ons-list-item>

    I’ve tried using the touchstart and touchend events then changing the one-list-item CSS color and background properties with partial success but find the ends of the list item don’t change color due to padding and offsets etc. Wondering if there is a better way?

    Thanks

    0
  • G

    HI,

    Please do as follows.

    <style>
  .list-item--tappable:active {
    background-color: blue !important;
  }
</style>

    and change tappable to modifier=“tappable”.

    <ons-list-item modifier="tappable">
     <div class="left">
	   <img class="list-item__thumbnail" src="img/MyIcon.png">
     </div>
     <div class="center">
          Some text
     </div>
     <div class="right">
	<i class="fa-solid fa-circle" style="color: blue"></i>
     </div>
</ons-list-item>

    Best Regards
    Gobi

    0