Use nav buttons to set the buttons on your
from within an
ionView. This gives each
view template the ability to specify which buttons should show in the nav bar,
overriding any default buttons already placed in the nav bar.
Any buttons you declare will be positioned on the navbar’s corresponding side. Primary buttons generally map to the left side of the header, and secondary buttons are generally on the right side. However, their exact locations are platform-specific. For example, in iOS, the primary buttons are on the far left of the header, and secondary buttons are on the far right, with the header title centered between them. For Android, however, both groups of buttons are on the far right of the header, with the header title aligned left.
We recommend always using
secondary, so the buttons correctly map
to the side familiar to users of each platform. However, in cases where buttons should
always be on an exact side, both
right sides are still available. For
example, a toggle button for a left side menu should be on the left side; in this case,
we’d recommend using
side="left", so it’s always on the left, no matter the platform.
ion-nav-buttons must be immediate descendants of the
ion-nav-bar element (basically, don’t wrap it in another div).
<ion-nav-bar> </ion-nav-bar> <ion-nav-view> <ion-view> <ion-nav-buttons side="primary"> <button class="button" ng-click="doSomething()"> I'm a button on the primary of the navbar! </button> </ion-nav-buttons> <ion-content> Some super content here! </ion-content> </ion-view> </ion-nav-view>
The side to place the buttons in the