Html 离子导航栏按钮 - 右侧

Ionic navbar buttons - right side

提问by Harry

I'm starting to use Ionic for the first time. Currently I have a listviewand the back button appears when moving into the list.

我第一次开始使用 Ionic。目前我有一个listview，当进入列表时会出现后退按钮。

<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-bar>

How do I add a button on the right of the screen now, also only appearing once moving into the list?

我现在如何在屏幕右侧添加一个按钮，并且也只在移动到列表中时出现？

采纳答案by Bipin Bhandari

You can use <ion-header-bar align-title="right">

您可以使用 <ion-header-bar align-title="right">

Full implementation (both left and right) (from docs):

完整实现（左右）（来自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>

<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-buttonsand setting side=rightis the right way of accomplishing this.

正如 Harry 所指出的，添加ion-nav-buttons和设置side=right是实现这一目标的正确方法。

(Copied from @harry's answer)

（复制自@harry 的回答）

<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>

回答by Harry

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>

回答by dk123

<ion-nav-buttons>is what you're looking for: link

<ion-nav-buttons>就是你要找的：链接

This took me a long time to find, but it works just great. Just put side="right"as the attribute.

这花了我很长时间才找到，但效果很好。只是把它side="right"作为属性。

It would be nice if this was more apparent in the docs.

如果这在文档中更明显，那就太好了。

回答by Abdullah Pariyani

<ion-header>
   <ion-toolbar color="primary">
      <ion-title class="titleHeader">User Detail</ion-title>
      <ion-buttons slot="end">
            <ion-back-button defaultHref="/"></ion-back-button>
      </ion-buttons>
   </ion-toolbar>
</ion-header>

You can find the answer from here also : Ionic 2 / 3 / 4 : How to align button in the header to the right side of header

您也可以从这里找到答案：Ionic 2 / 3 / 4：如何将标题中的按钮与标题右侧对齐