CODEWITHSUNDEEP
onsen-ui
ekiyanov
ekiyanov

Reputation: 461

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?

Upvotes: 1

Views: 736

Answers (1)

Fran Dios
Fran Dios

Reputation: 3482

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!

Upvotes: 2

Related Questions