Ionic navbar buttons - right side
<ion-nav-buttons>
is what you're looking for: link
This took me a long time to find, but it works just great. Just put side="right"
as the attribute.
It would be nice if this was more apparent in the docs.
This is what I ended up doing:
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-icon icon ion-ios7-arrow-back">
Back
</ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button button-clear button-positive" ng-click="reset()">
Refresh
</button>
</ion-nav-buttons>
</ion-nav-bar>
You can use <ion-header-bar align-title="right">
Full implementation (both left and right) (from docs):
<ion-header-bar align-title="left" class="bar-positive">
<div class="buttons">
<button class="button" ng-click="doSomething()">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons">
<button class="button">Right Button</button>
</div>
</ion-header-bar>
<ion-content>
Some content!
</ion-content>
As pointed out by Harry, adding ion-nav-buttons
and setting side=right
is the right way of accomplishing this.
(Copied from @harry's answer)
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-icon icon ion-ios7-arrow-back">
Back
</ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button button-clear button-positive" ng-click="reset()">
Refresh
</button>
</ion-nav-buttons>
</ion-nav-bar>