Search code examples
onsen-ui

What is the best way to wrap onsen ui list item to 'a' tag?

I try to make clickable list item using ons-list-item. When I display my entries like 

    <ons-list-item modifier="tappable">
    ...
    </ons-list-item>
    <ons-list-item modifier="tappable">
    ...
    </ons-list-item>

they are displayed properly.

But list separators disappear when I try to wrap ons-list-item to a tag. What is the best way to make ons-list-item handle links?

Solution

  • Two ways here. Using HTML:

    <a href="http://......">
   <ons-list-item>
      Item title
   </ons-list-item>
</a>

    This one is what you already tried. It will change the style of the text, the pointer and other stuff unless you specify something different.

    Using JavaScript:

    <ons-list-item onclick="window.location='http://......';">
   Item title
</ons-list-item>

    This one does not change the CSS, so if you don't have any problem with JavaScript it may be a solution. Hope it helps!