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>

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指南.因此,这样可以提高应用的质量.

有关指南的更多信息:

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

Answer 2

离子4离子导航杆被离子后退按钮取代,而离子4后退按钮就像

<ion-header>
  <ion-toolbar>
       <ion-buttons slot="start">
  <ion-back-button></ion-back-button>
       </ion-buttons>
    <ion-title>
     Home
    </ion-title>
      <ion-button slot="secondary">
        <ion-icon name="search"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

Answer 3

您可以在ionic 2.0的标题右侧添加按钮

<ion-navbar *navbar>
    <ion-title>
        TODO APP
    </ion-title>
    <ion-buttons end>
        <button ><ion-icon name="home"></ion-icon></button>
    </ion-buttons>
</ion-navbar>

您可以像这样添加自定义图标的 css 类

CSS

.ion-ios-custom:before {
    background-image: url("image-icon.png");        
 }

或者

.ion-ios-custom:before {       
   content: "\f439"; /* your font code */
 }

或者

.ion-ios-custom:before {
   content: url("image-icon.png") !important;
}

html

<ion-icon name="custom"></ion-icon>