Ionic 2 / 3 / 4：如何将标题中的按钮与标题右侧对齐

Question

我怎样才能与右侧对齐，按钮显示在标题的左侧，没有撰写图标。

这是我在做什么：

 <ion-toolbar>
<ion-title>TODO APP</ion-title>
<button class = "button button-icon">
    <i class="icon ion-compose"></i>
</button>
</ion-toolbar>

原文由 blackHawk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Ionic 2 / Ionic 3 有一些东西，看看下面的代码：

 <ion-header>
  <ion-navbar primary>
    <ion-buttons start>
      <button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>

    <ion-title>
      My Page
    </ion-title>

    <ion-buttons end>
      <button (click)="myFunction()" ion-button icon-only>
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

以这种方式解决你的问题的好处是你的导航栏会自动遵守 android/ios/windows 指南。因此，您可以通过这种方式提高应用程序的质量。

有关指南的更多信息：

安卓： https ://developer.android.com/guide/practices/ui_guidelines/index.html

iOS ： https ://developer.apple.com/ios/human-interface-guidelines/

视窗： https ://developer.microsoft.com/en-us/windows/design

原文由 glemiere 发布，翻译遵循 CC BY-SA 3.0 许可协议