离子导航栏按钮 - 右侧

Question

我第一次开始使用 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>

我现在如何在屏幕右侧添加一个按钮，也只出现一次进入列表？

Answer 1

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

您也可以从这里找到答案：Ionic 2 / 3 / 4 : How to align button in the header to the right side of header

Answer 2

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

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

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

（复制自@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>

Answer 3

<ion-nav-buttons> 是您要查找的内容：link

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

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

Answer 4

这就是我最终做的：

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