CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic2ionic3
Spilot
Spilot

Reputation: 1525

Is Ion-list supposed to automatically add an arrow on the list item?

The Ionic 2 documentation makes it seem like the arrow automatically comes with it. It isn't working that way for me however.

https://ionicframework.com/docs/components/#lists

<ion-list>
         <ion-item>
           <p>Terms Of Use</p>
         </ion-item>
         <ion-item>
           <p>Privacy Policy</p>
         </ion-item>
</ion-list>

Upvotes: 5

Views: 4096

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

The arrow you're talking about is the Detail arrow (docs). Just like you can see in the docs:

By default, and elements with the ion-item attribute will display a right arrow icon on ios mode.

And

To hide the right arrow icon on either of these elements, add the detail-none attribute to the item. To show the right arrow icon on an element that doesn't display it naturally, add the detail-push attribute to the item.

Regarding Android and Windows phone,

This feature is not enabled by default for md and wp modes, but it can be enabled by setting the Sass variables $item-md-detail-push-show and $item-wp-detail-push-show, respectively, to true. It can also be disabled for ios by setting $item-ios-detail-push-show to false

So if you want to enable it for android and windows phone, you just need to add the following in your variables.scss file:

$item-md-detail-push-show: true;
$item-wp-detail-push-show: true;

Upvotes: 12

Related Questions