离子导航栏按钮-右侧

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>

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

- Harry

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>

- Harry

---

这样做会在所有选项卡上都给我一个按钮吗？如果我有多个选项卡并且我想要基于选项卡不同的按钮，是否有类似的解决方案。我不想使用ion-header-bar。 - Ravi Shankar Bharti

Answer 2

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

完整实现（左右均可）（来自文档）：

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

- Bipin Bhandari

---

这种解决方案的问题在于它没有使用导航栏，因此您会失去路由系统提供的状态管理功能。在此处阅读有关两种方法之间差异的更多信息：http://learn.ionicframework.com/formulas/navigation-bar-vs-header-bar/ - smg

Answer 3

<ion-nav-buttons>是您要寻找的内容：链接 我花了很长时间才找到它，但它确实非常好用。只需将side="right"作为属性即可。

如果文档中更明显地标出这一点会更好。

- dk123

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：如何将按钮对齐到标题的右侧

- Abdullah