Ionic-framework: Add the forward arrow as an option for md & wp mode

[brandyscarney]

Should be able to add an option to enable the forward arrow on items similar to ios.

Forum post:
https://forum.ionicframework.com/t/android-arrow-forward-not-showing-up-for-button-ion-item/42922

Can probably set a variable that determines whether or not to add the forward arrow and default it to false for these platforms in order to match the design guidelines, yet let the user set it to true to enable it.

Material Design list guidelines: https://www.google.com/design/spec/components/lists.html#lists-specs

Relevant code: https://github.com/driftyco/ionic/blob/2.0/ionic/components/item/item.ios.scss#L166-L176

[alexbainbridge]

Can you please make it an option for IOS also?

e.g. a button with ion-item class always has arrow-right, would be nice to be able to turn that off

[brandyscarney]

@alexbainbridge You can add the detail-none attribute to the item to hide the arrow, but I will also add it as an option in the Sass. :smile:

[tejit2004]

Hi @brandyscarney, Any updates on the issue? Also I want arrow-up and arrow-down for list header, so that can be toggle by clicking upon. Is that on development?

[brandyscarney]

Thanks for the issue! This is now possible by setting the following Sass variables to true:

$item-md-detail-push-show 
$item-wp-detail-push-show
$item-ios-detail-push-show

By default, $item-ios-detail-push-show is already set to true and the others are set to false. Setting these variables to true essentially enables the arrow including adding it via the detail-push attribute.

I updated the item documentation to include this: http://ionicframework.com/docs/v2/api/components/item/Item/#detail-arrows

This will be in the beta 9 release, but if you want to try it sooner I have created a nightly release:

npm install --save [email protected]

[leonardopaiva]

Hello, isnt working here:

My code
sass variables, app/app.scss:

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

view code showing the detail-push application:

<ion-list>
      <button ion-item detail-push *ngFor="let work of about.works" (click)="presentModalWorks(work)">
        <ion-avatar item-start>
          <img [src]="work.images.avatar">
        </ion-avatar>
        <p>{{ work.title }}</p>
      </button>
    </ion-list>

detail-none works as expected, but detail-push dont, thanks for your attention.

[kensodemann]

Try moving this to the theme/variables.scss file:

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

See the theming docs for details.

As a side note, you shouldn't need detail-push on a button with ion-item per the detail arrows docs, but I don't think it is doing you any harm either.

[leonardopaiva]

thanks @kensodemann i moved to theme/variables.scss and now is working, it was my mistake i should have tried in the theme/variables.scss first. Even if it`s something obvious, others can make mistakes too. It might be a good idea to make it clear in the documentation that the variables need to be on the theme/variables.scss.

About

"As a side note, you shouldn't need detail-push on a button with ion-item per the detail arrows docs, but I don't think it is doing you any harm either."

I need it because in android/desktop the arrow will not show, that`s because of the material design guideline, but i dont like that, i want to make clear to the user that he can navigate there.

thanks again! you saved me, i would not want to have to do a workaround because of that.

[kensodemann]

WRT the docs, we have this in the template app/app.sccs

// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".

Granted, if you are like me and delete the template comments after the first time you read them and then totally forget about them, then that won't do you any good, but they are there when the app is first generated anyhow. :)

Glad to hear it is working for you!

[leonardopaiva]

haha you are right, i will stop deleting some template comments, thanks.

[ionitron-bot[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.