Clever Geek Handbook

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

The Ionic 2 documentation shows the arrow automatically comes with it. However, this doesn't work for me.

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>
+4


source to share


2 answers


The arrow you are talking about is the More arrow ( docs ). Just as you can see in the docs:

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

and

To hide the right arrow icon on any of these elements, add detail-none

an attribute to the element. To show the right arrow icon to an element that does not display it naturally, add detail-push

an attribute to the element.



As for the Android phone and Windows,

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 thus $item-wp-detail-push-show

to true

. This can also be disabled for ios by setting $item-ios-detail-push-show

infalse

So, if you want to enable it for Android and Windows phone, you just need to add the following to your file variables.scss

:

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


source


I don't want this arrow icon to be shown for ios devices, so I override $ item-ios-detail-push-show: false; in variable.scss in ionic 4 also tried with detail = "false" in HTML, but none of the way works.



How can we solve this?

0


source






More articles:


All Articles