离子导航栏按钮 - 右侧

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-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 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＆＃39;

）

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