Ionic 2/3/4:如何将标题中的按钮与标题右侧对齐 [英] Ionic 2 / 3 / 4 : How to align button in the header to the right side of header

问题描述

我如何与右侧对齐，按钮显示在标题的左侧而没有撰写图标.

How can I align with the right side, the button is showing on the left of the header without compose icon.

这是我在做什么:

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

推荐答案

Ionic 2/Ionic 3为此，只需看下面的代码即可:

Ionic 2 / Ionic 3 has something for that, just look at the following code :

<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准则.这样一来，您可以提高应用程序的质量.

The advantage of solving your problem this way is that your navbar will automatically respect the android/ios/windows guidelines. So this way you improve the quality of your app.

有关准则的更多信息:

Android : https://developer.android.com/guide/practices/ui_guidelines/index.html

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

Windows : https://developer.microsoft.com/en-us/windows/design

这篇关于Ionic 2/3/4:如何将标题中的按钮与标题右侧对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！