Display back button in ion-nav-bar iOS only

Question

Though I'm sure this is something that isn't uncommon in ionic development, I can't seem to find anything on the web that explains this. If I have the following:

<body ng-app="myApp">

  <ion-nav-bar class="bar-positive">
  </ion-nav-bar>

  <ion-nav-view></ion-nav-view>

</body>

And one of the views that I use in the ion-nav-view looks like this for exmaple:

<ion-view view-title="Profile" ng-controller="profileController" class="profile-view">
  <ion-content class="padding has-header">
  ....

How do I display a back button (really just the ion-chevron-left icon) for iOS only, and have it hidden on other devices that have a dedicated hardware button?

Alternatively the back button is just going to have to show on Android. That's what you get for having 15 different ways to do one thing. — user818700

Terence Terence · Accepted Answer · 2015-08-12T15:05:03

There are a couple of ways to achieve platform specific behaviour. You can read up on the back button specifically, here.

In your controller, you can use the ionic.Platform utility to determine the current platform and the Ionic NavBarDelegate to show/hide the button.

HTML:

<body ng-app="app" ng-controller="appCtrl">
  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button></ion-nav-bar-back-button>
  </ion-nav-bar>
</body>

Controller:

.controller('appCtrl', function($scope, $ionicNavBarDelegate) {
   var isIOS = ionic.Platform.isIOS();
   $ionicNavBarDelegate.showBackButton(isIOS);
});

In your css, define separate classes to show/hide the element depending on the platform. From here.

HTML:

<body ng-app="app" ng-controller="appCtrl">
  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button class="platform-nav"></ion-nav-bar-back-button>
  </ion-nav-bar>
</body>

CSS:

.platform-ios .platform-nav {
    display: block;
}
.platform-android .platform-nav {
    display: none;
}

Display back button in ion-nav-bar iOS only

1 Answers