Android-like navigation bar back-button & title


#1

Hello folks,

I’m currently working on the final bits of my ionic app and trying to mimic a native-like feeling for android. Therefore I’m curios if it is possible to make the title clickable and very close to the arrow button (like in the android docs -> http://developer.android.com/design/patterns/navigation.html).

Right now I’m just able to show the arrow-left icon (from ionicons) next to the left aligned view title.

Can u provide me with more info?

Thanks!


#2

If you create a new app using eg. tabs template, it will have a back button in index.html using ion-nav-back-button:

<body ng-app="starter"> <!-- The nav bar that will be updated as we navigate between views. --> <ion-nav-bar class="bar-stable"> <ion-nav-back-button> </ion-nav-back-button> </ion-nav-bar> <!-- The views will be rendered in the <ion-nav-view> directive below Templates are in the /templates folder (but you could also have templates inline in this html file if you'd like). --> <ion-nav-view></ion-nav-view> </body>

In the docs of ion-nav-back-button it shows how to provide a custom content of the back button.

Thus you could use a explicit image and back button title.

<i class="icon ion-..."> Back

Just like we can do <ion-view-title> to specify the title including any HTML, perhaps there is a similar way to specify the back button content for each view so that it is possible to write out the destination of the back button.