Right Chevron on List Item links & buttons

[kfuchs]

Currently, by default a right chevron symbol is placed on the right side of list items that are links or buttons. I think this is overly opinionated, rather then force an icon on the right side allow the developer to choose whether an icon appears or not. If the developer wants a chevron on the right side of a list-item they can do so by simply applying the icon to right like they would any other icon:

<a class="item item-icon-left item-icon-right" href="#">
  <i class="icon ion-email"></i>
  Check mail
  <i class="icon ion-chevron-right" style="color:#ccc; font-size:16px;"></i>
</a>

Note the extra styling is needed to make the chevron appear exactly the same as the current default chevron. I'd also like to point out having this chevron is not the norm UI for most app menus.

related pull request #1060

[rvanbaalen]

+1

[adamdbradley]

Yes I agree that the developer should be stating exactly how they want an icon to show, and this auto right chevron violates that. The primary reason for this feature was to reduce the number of elements in the list, but with our work with virtual lists this may no longer be an issue.

I'd like to remove the :after nav icon styling, and create a new class based off of it's css. The goal would be to allow any icon to be set, but to add another class to give it the gray color and larger font size. Suggestions for the name of this class?

[adamdbradley]

We're thinking about going with:

<a class="item item-accessory-right" href="#">
  Check mail
  <i class="icon ion-chevron-right"></i>
</a>

Note that item-accessory-right was added to the item, and the icon element is required.

item-accessory-right is pretty much the same as item-icon-right, except it's default is gray and font-size 16px.

This would remove the :after auto right chevron entirely, require developers to add in an additional element with their icon of choice (the default was ion-chevron-right), and require the item to have the item-accessory-right class.

This makes a nav arrow highly customizable, allows RTL developers to easily control the arrows direction, and the accessory class is something that's reusable and not just specifically for nav arrows.

Thoughts?

http://forum.ionicframework.com/t/request-for-feedback-customizing-right-side-nav-arrows-in-lists/2728

[adamdbradley]

Changing it to:

<a class="item item-icon-right" href="#">
  Check mail
  <i class="icon ion-chevron-right icon-accessory"></i>
</a>

This simplifies the CSS and makes icon-accessory just a styling class. This way it can easily be used on either a left or right icon, and to make it easy to apply the style to the correct icon when both left and right icons are in the same item.

[johnrogers]

You should probably update this in the docs, it currently reads "If the item is an or element, and no icon has been added to the right, then a small right arrow will automatically be added.". Left me confused for a good while as to why the chevron wasn't automatically appearing.

[RickeyWard]

The docs are still not updated on this. Its 2017

[minimallinux]

Id like to remove the arrow on the right (list items) I don't think its necessary, just started with F7 does anyone know how to do this ? Thanks

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.